msgs are in a store

This commit is contained in:
simplonco
2023-01-05 09:21:06 +01:00
parent a4a2b4bf76
commit e16dc56314
5 changed files with 154 additions and 144 deletions

View File

@@ -3,50 +3,57 @@
import Layouts from './Chat_layouts.svelte';
export let color = "transparent";
import { onMount } from 'svelte';
/* web sockets with socket.io
*/
import { socket } from './Chat_socket.svelte';
import { socket, user } from './Chat_socket.svelte';
import { msgs } from './Store_msg.js';
onMount(async() => {
await socket;
socket.on('connect', function(){
console.log("socket.io connected");
});
socket.on('disconnect', function(){
console.log("socket.io disconnected");
});
socket.on('connect_error', function(){
console.log("socket.io connect_error");
});
socket.on('connect_timeout', function(){
console.log("socket.io connect_timeout");
});
socket.on('error', function(){
console.log("socket.io error");
});
socket.on('reconnect', function(){
console.log("socket.io reconnect");
});
socket.on('reconnect_attempt', function(){
console.log("socket.io reconnect_attempt");
});
socket.on('reconnecting', function(){
console.log("socket.io reconnecting");
});
socket.on('reconnect_error', function(){
console.log("socket.io reconnect_error");
});
socket.on('reconnect_failed', function(){
console.log("socket.io reconnect_failed");
});
socket.on('ping', function(){
console.log("socket.io ping");
});
socket.on('pong', function(){
console.log("socket.io pong");
});
// pbm: sometimes socket is still undefined here
socket.on('connect', function(){
console.log("socket.io connected");
});
socket.on('disconnect', function(){
console.log("socket.io disconnected");
});
socket.on('connect_error', function(){
console.log("socket.io connect_error");
});
socket.on('connect_timeout', function(){
console.log("socket.io connect_timeout");
});
socket.on('error', function(){
console.log("socket.io error");
});
socket.on('reconnect', function(){
console.log("socket.io reconnect");
});
socket.on('reconnect_attempt', function(){
console.log("socket.io reconnect_attempt");
});
socket.on('reconnecting', function(){
console.log("socket.io reconnecting");
});
socket.on('reconnect_error', function(){
console.log("socket.io reconnect_error");
});
socket.on('reconnect_failed', function(){
console.log("socket.io reconnect_failed");
});
socket.on('ping', function(){
console.log("socket.io ping");
});
socket.on('pong', function(){
console.log("socket.io pong");
});
socket.on('message', (from, message) => {
if (from === user.username)
from = "me";
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
//add_msg(name, message);
});
</script>

View File

@@ -4,25 +4,21 @@
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
import { socket, user } from './Chat_socket.svelte';
socket.on('message', (name, message) => {
console.log(name)
console.log(message)
add_msg(name, message);
});
import { msgs } from './Store_msg.js';
export let layout = "";
export let back = "";
let msg = "";
let text_area;
let msgs = [];
//let msgs = [];
function add_msg(from, message)
{
if (from === user.username)
from = "me";
msgs = [...msgs, { content: message, name: from }];
//msgs = [...msgs, { content: message, name: from }];
msgs.update(msgs => [...msgs, { content: message, name: from }]);
}
function send_msg()
@@ -68,7 +64,7 @@
<!-- msg -->
<div class="panel panel_msg">
<div class="msg_thread">
{#each msgs as msg}
{#each $msgs as msg}
<Msg name={msg.name}>{@html msg.content}</Msg>
{/each}
</div>

View File

@@ -0,0 +1,5 @@
import { writable } from 'svelte/store';
export let msgs = writable([]);