wip chat in room, now broadcast with name

README.md

@@ -132,3 +132,10 @@
 - [docker](https://github.com/docker/docker-install)
 
 
+
+---
+## hugo
+
+- in Chat.svelte, import of socket is not always defined becaus async, tried to solve that in onMount but no luck
+
+

srcs/requirements/nestjs/api_back/src/app.module.ts

@@ -35,9 +35,6 @@ import { ChatModule } from './chat/chat.module';
 		// GameModule,
 	],
   controllers: [AppController],
-  providers: [
+  providers: [AppService],
-		AppService,
-		ChatGateway,
-	],
 })
 export class AppModule {}

srcs/requirements/nestjs/api_back/src/chat/chat.gateway.ts

@@ -3,12 +3,15 @@ import {
 	SubscribeMessage,
 	WebSocketServer,
 	MessageBody,
+	ConnectedSocket,
 	OnGatewayConnection,
 	OnGatewayDisconnect,
 } from '@nestjs/websockets';
+import { UseGuards } from '@nestjs/common';
 import { UsersService } from 'src/users/users.service';
 import { PaginationQueryDto } from 'src/common/dto/pagination-query.dto';
-import { ChatService } from 'src/chat/chat.service';
+import { ChatService } from './chat.service';
+import { AuthenticateGuard } from 'src/auth/42/guards/42guards';
 
 @WebSocketGateway(5000, {
 	path: '/chat',
@@ -29,22 +32,25 @@ export class ChatGateway
 	// how to guard the handleConnection ?
 	// https://github.com/nestjs/nest/issues/882
 	async handleConnection(client) {
-		console.log('---- Client connected    :', client.id);
+		console.log('- Client connected :', client.id, client.handshake.query.username);
+		client.username = client.handshake.query.username;
 	}
 	async handleDisconnect(client) {
-		console.log('---- client disconnected :', client.id);
+		console.log('- Client disconnected :', client.id, client.username);
 	}
 
 //	@UseGuards(AuthenticateGuard)
 	@SubscribeMessage('message')
-	handleMessage(@MessageBody() message: string): void {
+//	handleMessage(@MessageBody() message: string): void {
-		console.log('-------- msg --------------');
+//	handleMessage(client: any, message: string): void {
-		console.log(message);
+	handleMessage(@ConnectedSocket() client, @MessageBody() message: string): void{
 //		const paginationQuery = new PaginationQueryDto();
 //		const users = this.usersService.findAll(paginationQuery);
 //		console.log('users :', users);
 //		this.server.emit('message', message);
-		this.chatService.add_message(this.server, message);
+		console.log('client.username :', client.username);
+		client.local.emit('message', client.username, message);
+//		this.chatService.add_message(this.server, message);
 	}
 
 }

srcs/requirements/nestjs/api_back/src/chat/chat.module.ts

@@ -1,11 +1,22 @@
 import { Module } from '@nestjs/common';
 import { ChatController } from './chat.controller';
 import { ChatService } from './chat.service';
+import { ChatGateway } from './chat.gateway';
+import { UsersModule } from 'src/users/users.module';
 
 @Module({
-	providers: [ChatService],
+	imports: [
-  controllers: [ChatController],
+		UsersModule,
-	exports: [ChatService],
+	],
+  controllers: [
+		ChatController,
+	],
+	exports: [
+	],
+	providers: [
+		ChatService,
+		ChatGateway,
+	],
 })
 
 export class ChatModule {}

srcs/requirements/svelte/api_front/public/build/bundle.js

@@ -7855,13 +7855,17 @@ var app = (function () {
 
     /* src/pieces/chat/Chat_socket.svelte generated by Svelte v3.53.1 */
 
-    const address = `http://${'transcendance'}:${'8080'}`;
-    const socket$1 = lookup(address, { path: '/chat' });
-    const userPomise = fetch(`${address}/api/v2/user`).then(x => x.json());
     let user;
+    let socket$1;
+    const address = `http://${'transcendance'}:${'8080'}`;
 
-    userPomise.then(data => {
+    fetch(`${address}/api/v2/user`).then(resp => resp.json()).then(data => {
     	user = data;
+
+    	socket$1 = lookup(address, {
+    		path: '/chat',
+    		query: { username: user.username }
+    	});
     });
 
     /* src/pieces/chat/Layout_room.svelte generated by Svelte v3.53.1 */
@@ -7875,7 +7879,7 @@ var app = (function () {
     	return child_ctx;
     }
 
-    // (56:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
+    // (54:1) <Button bind:layout new_layout={back} my_class="back icon" my_title="go back {back}">
     function create_default_slot_4$2(ctx) {
     	let t;
 
@@ -7895,14 +7899,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_4$2.name,
     		type: "slot",
-    		source: "(56:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
+    		source: "(54:1) <Button bind:layout new_layout={back} my_class=\\\"back icon\\\" my_title=\\\"go back {back}\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (61:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
+    // (59:1) <Button bind:layout new_layout="room_set" my_class="room_name transparent">
     function create_default_slot_3$4(ctx) {
     	let t;
 
@@ -7922,14 +7926,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_3$4.name,
     		type: "slot",
-    		source: "(61:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
+    		source: "(59:1) <Button bind:layout new_layout=\\\"room_set\\\" my_class=\\\"room_name transparent\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (66:1) <Button bind:layout new_layout="close" my_class="close icon">
+    // (64:1) <Button bind:layout new_layout="close" my_class="close icon">
     function create_default_slot_2$8(ctx) {
     	let t;
 
@@ -7949,14 +7953,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_2$8.name,
     		type: "slot",
-    		source: "(66:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
+    		source: "(64:1) <Button bind:layout new_layout=\\\"close\\\" my_class=\\\"close icon\\\">",
     		ctx
     	});
 
     	return block;
     }
 
-    // (74:4) <Msg name={msg.name}>
+    // (72:4) <Msg name={msg.name}>
     function create_default_slot_1$8(ctx) {
     	let html_tag;
     	let raw_value = /*msg*/ ctx[4].content + "";
@@ -7985,14 +7989,14 @@ var app = (function () {
     		block,
     		id: create_default_slot_1$8.name,
     		type: "slot",
-    		source: "(74:4) <Msg name={msg.name}>",
+    		source: "(72:4) <Msg name={msg.name}>",
     		ctx
     	});
 
     	return block;
     }
 
-    // (73:3) {#each msgs as msg}
+    // (71:3) {#each msgs as msg}
     function create_each_block$4(ctx) {
     	let msg_1;
     	let current;
@@ -8042,14 +8046,14 @@ var app = (function () {
     		block,
     		id: create_each_block$4.name,
     		type: "each",
-    		source: "(73:3) {#each msgs as msg}",
+    		source: "(71:3) {#each msgs as msg}",
     		ctx
     	});
 
     	return block;
     }
 
-    // (91:1) <Button my_class="send" on_click={send_msg}>
+    // (89:1) <Button my_class="send" on_click={send_msg}>
     function create_default_slot$a(ctx) {
     	let t;
 
@@ -8069,7 +8073,7 @@ var app = (function () {
     		block,
     		id: create_default_slot$a.name,
     		type: "slot",
-    		source: "(91:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
+    		source: "(89:1) <Button my_class=\\\"send\\\" on_click={send_msg}>",
     		ctx
     	});
 
@@ -8196,17 +8200,17 @@ var app = (function () {
     			t4 = space();
     			create_component(button3.$$.fragment);
     			attr_dev(div0, "class", "msg_thread svelte-1quyp80");
-    			add_location(div0, file$m, 71, 2, 1256);
+    			add_location(div0, file$m, 69, 2, 1224);
     			attr_dev(div1, "class", "panel panel_msg svelte-1quyp80");
-    			add_location(div1, file$m, 70, 1, 1224);
+    			add_location(div1, file$m, 68, 1, 1192);
     			attr_dev(div2, "class", "text_area svelte-1quyp80");
     			attr_dev(div2, "contenteditable", "true");
     			if (/*msg*/ ctx[4] === void 0) add_render_callback(() => /*div2_input_handler*/ ctx[10].call(div2));
-    			add_location(div2, file$m, 80, 2, 1429);
+    			add_location(div2, file$m, 78, 2, 1397);
     			attr_dev(div3, "class", "panel_write svelte-1quyp80");
-    			add_location(div3, file$m, 79, 1, 1401);
+    			add_location(div3, file$m, 77, 1, 1369);
     			attr_dev(div4, "class", "grid_box svelte-1quyp80");
-    			add_location(div4, file$m, 52, 0, 836);
+    			add_location(div4, file$m, 50, 0, 804);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -8385,10 +8389,10 @@ var app = (function () {
     	let { $$slots: slots = {}, $$scope } = $$props;
     	validate_slots('Layout_room', slots, []);
 
-    	socket$1.on('message', data => {
+    	socket$1.on('message', (name, message) => {
-    		console.log("received msg :");
+    		console.log(name);
-    		console.log(data);
+    		console.log(message);
-    		add_msg("other", data);
+    		add_msg(name, message);
     	});
 
     	let { layout = "" } = $$props;
@@ -8397,14 +8401,12 @@ var app = (function () {
     	let text_area;
     	let msgs = [];
 
-    	function add_msg(from, the_msg) {
+    	function add_msg(from, message) {
-    		$$invalidate(3, msgs = [...msgs, { content: the_msg, name: from }]);
+    		if (from === user.username) from = "me";
+    		$$invalidate(3, msgs = [...msgs, { content: message, name: from }]);
     	}
 
     	function send_msg() {
-    		console.log("user:");
-    		console.log(user);
-    		console.log(user.username);
     		$$invalidate(4, msg = msg.trim());
 
     		if (msg.length > 0) {
@@ -13989,7 +13991,9 @@ var app = (function () {
     	validate_slots('Chat', slots, []);
     	let { color = "transparent" } = $$props;
 
-    	onMount(async => {
+    	onMount(async () => {
+    		await socket$1;
+
     		socket$1.on('connect', function () {
     			console.log("socket.io connected");
     		});

srcs/requirements/svelte/api_front/src/pieces/chat/Chat.svelte

@@ -9,7 +9,8 @@
 	*/
 	import { socket } from './Chat_socket.svelte';
 
-	onMount(async => {
+	onMount(async() => {
+		await socket;
 		socket.on('connect', function(){
 			console.log("socket.io connected");
 		});

srcs/requirements/svelte/api_front/src/pieces/chat/Chat_socket.svelte

@@ -1,17 +1,25 @@
 <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}`;
 
-	export const socket = io(address, {
+	fetch(`${address}/api/v2/user`)
-		path: '/chat'
+	.then((resp) => resp.json())
-	});
+	.then((data) =>
-
+	{
-	const userPomise = fetch(`${address}/api/v2/user`).then((x) => x.json());
-	export let user
-	userPomise.then((data) => {
 		user = data;
+		socket = io(address,
+		{
+			path: '/chat',
+			query:
+			{
+				username: user.username,
+			},
+		});
 	});
 
 </script>
+

srcs/requirements/svelte/api_front/src/pieces/chat/Layout_room.svelte

@@ -5,10 +5,10 @@
 	import Msg from './Chat_msg.svelte';
 	import { socket, user } from './Chat_socket.svelte';
 
-	socket.on('message', (data) => {
+	socket.on('message', (name, message) => {
-		console.log("received msg :");
+		console.log(name)
-		console.log(data);
+		console.log(message)
-		add_msg("other", data);
+		add_msg(name, message);
 	});
 
 	export let layout = "";
@@ -18,17 +18,15 @@
 	let text_area;
 	let msgs = [];
 
-	function add_msg(from, the_msg)
+	function add_msg(from, message)
 	{
-		msgs = [...msgs, { content: the_msg, name: from }];
+		if (from === user.username)
+			from = "me";
+		msgs = [...msgs, { content: message, name: from }];
 	}
 
 	function send_msg()
 	{
-		console.log("user:");
-		console.log(user);
-		console.log(user.username);
-
 		msg = msg.trim();
 		if (msg.length > 0) {
 			socket.emit('message', msg);