msgs are in a store
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export let msgs = writable([]);
|
||||
|
||||
Reference in New Issue
Block a user