42/42_INT_14_transcendence
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

new svelte files organisation for sockets and store

Browse Source
This commit is contained in:
simplonco
2023-01-08 15:35:19 +01:00
parent 4c0256e7b3
commit 272221071d
25 changed files with 7422 additions and 7542 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14730
srcs/requirements/svelte/api_front/public/build/bundle.js
View File

File diff suppressed because it is too large Load Diff

2
srcs/requirements/svelte/api_front/public/build/bundle.js.map
View File

File diff suppressed because one or more lines are too long

63
srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte
View File

@@ -1,70 +1,11 @@
<script lang="ts">
import Layouts from './Chat_layouts.svelte';
import { init_socket } from './Socket_init';
export let color = "transparent";
/* web sockets with socket.io
*/
//import { socket, user } from './Chat_socket.svelte';
import { init_socket, socket, user } from './Socket';
import { msgs } from './Store_msg.js';
init_socket();
/*
async function socket_actions()
{
await init_socket();
// 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', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { content: message, name: from }]);
});
};
socket_actions();
*/
</script>

1
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_box_css.svelte
View File

@@ -1,4 +1,3 @@
<script lang="ts">
export let color;

3
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_layouts.svelte
View File

@@ -1,4 +1,3 @@
<script lang="ts">
import Debug from './tmp_debug.svelte';
@@ -16,7 +15,7 @@
import MuteLayout from './Layout_mute.svelte';
import UserLayout from './Layout_user.svelte';
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
/* global variables
*/

26
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_socket.svelte
View File

@@ -1,26 +0,0 @@
<script context="module">
import io from 'socket.io-client';
export let user;
export let socket;
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
fetch(`${address}/api/v2/user`)
.then((resp) => resp.json())
.then((data) =>
{
user = data;
console.log("user:", user);
socket = io(address,
{
path: '/chat',
query:
{
username: user.username,
},
});
});
</script>

1
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_button.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Element_button.svelte
View File

@@ -1,4 +1,3 @@
<!--
<Button
bind:layout

0
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_msg.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Element_msg.svelte
View File

0
srcs/requirements/svelte/api_front/src/pieces/chat/Chat_warning.svelte → srcs/requirements/svelte/api_front/src/pieces/chat/Element_warning.svelte
View File

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_close.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout;
</script>

4
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_create.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import Button from './Chat_button.svelte';
import Warning from './Chat_warning.svelte';
import Button from './Element_button.svelte';
import Warning from './Element_warning.svelte';
export let layout = "";
export let back = "";

6
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_home.svelte
View File

@@ -1,10 +1,8 @@
<script>
import { onMount } from 'svelte';
import Button from './Chat_button.svelte';
import { msgs } from './Store_msg.js';
import { user } from './Chat_socket.svelte';
import Button from './Element_button.svelte';
import { msgs, user } from './Store_chat';
export let layout;
let rooms = [

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_mute.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_new.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_protected.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

8
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte
View File

@@ -1,10 +1,8 @@
<script>
import Button from './Chat_button.svelte';
import Msg from './Chat_msg.svelte';
import { socket } from './Chat_socket.svelte';
import { msgs } from './Store_msg.js';
import Button from './Element_button.svelte';
import Msg from './Element_msg.svelte';
import { socket, msgs } from './Store_chat';
export let layout = "";
export let back = "";

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room_set.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_settings.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

3
srcs/requirements/svelte/api_front/src/pieces/chat/Layout_user.svelte
View File

@@ -1,7 +1,6 @@
<script>
import Button from './Chat_button.svelte';
import Button from './Element_button.svelte';
export let layout = "";
export let back = "";

10
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_events.ts Normal file
View File

@@ -0,0 +1,10 @@
export function socket_events(socket)
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { content: message, name: from }]);
});
}

28
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_init.ts Normal file
View File

@@ -0,0 +1,28 @@
import io from 'socket.io-client';
import { set_socket, set_user } from './Store_chat';
import { socket_events } from './Socket_events';
import { connection_states } from './Socket_states';
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
export async function init_socket()
{
const response = await fetch(`${address}/api/v2/user`);
const response_data = await response.json();
set_user(response_data);
let socket = await io(address,
{
path: '/chat',
query:
{
username: response_data.username,
},
});
set_socket(socket);
connection_states(socket);
socket_events(socket);
}

1
srcs/requirements/svelte/api_front/src/pieces/chat/Socket_states.js
View File

@@ -1 +0,0 @@

43
srcs/requirements/svelte/api_front/src/pieces/chat/Socket.ts → srcs/requirements/svelte/api_front/src/pieces/chat/Socket_states.ts
View File

@@ -1,45 +1,4 @@
import io from 'socket.io-client';
export let user;
export let socket;
const address = `http://${process.env.WEBSITE_HOST}:${process.env.WEBSITE_PORT}`;
export async function init_socket()
{
console.log("inside init_socket");
const response = await fetch(`${address}/api/v2/user`);
const response_data = await response.json();
user = response_data;
console.log("user:", user);
socket = await io(address,
{
path: '/chat',
query:
{
username: user.username,
},
})
console.log("socket:", socket);
connection_states();
socket_events();
}
function socket_events()
{
socket.on('message', function(from, message)
{
console.log("received msg:", message, from);
if (from === user.username)
from = "me";
msgs.update(msgs => [...msgs, { content: message, name: from }]);
});
}
function connection_states()
export function connection_states(socket)
{
socket.on('connect', function(){ console.log("socket.io connected"); });
socket.on('disconnect', function(){ console.log("socket.io disconnected"); });

10
srcs/requirements/svelte/api_front/src/pieces/chat/Store_chat.ts Normal file
View File

@@ -0,0 +1,10 @@
import { writable } from 'svelte/store';
export let msgs = writable([]);
export let user;
export let socket;
export function set_user(new_user) { user = new_user; }
export function set_socket(new_socket) { socket = new_socket; }

7
srcs/requirements/svelte/api_front/src/pieces/chat/Store_msg.js
View File

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