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

wip chat in room, now broadcast with name

Browse Source
This commit is contained in:
simplonco
2023-01-04 21:57:01 +01:00
parent 1c2d202ec1
commit a4a2b4bf76
9 changed files with 96 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -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

5
srcs/requirements/nestjs/api_back/src/app.module.ts
View File

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

20
srcs/requirements/nestjs/api_back/src/chat/chat.gateway.ts
View File

@@ -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 {
console.log('-------- msg --------------');
console.log(message);
// handleMessage(@MessageBody() message: string): void {
// handleMessage(client: any, message: string): void {
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);
}
}

17
srcs/requirements/nestjs/api_back/src/chat/chat.module.ts
View File

@@ -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],
controllers: [ChatController],
exports: [ChatService],
imports: [
UsersModule,
],
controllers: [
ChatController,
],
exports: [
],
providers: [
ChatService,
ChatGateway,
],
})
export class ChatModule {}

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

@@ -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 => {
console.log("received msg :");
console.log(data);
add_msg("other", data);
socket$1.on('message', (name, message) => {
console.log(name);
console.log(message);
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) {
$$invalidate(3, msgs = [...msgs, { content: the_msg, name: from }]);
function add_msg(from, message) {
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");
});

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

File diff suppressed because one or more lines are too long

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

@@ -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");
});

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

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

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

@@ -5,10 +5,10 @@
import Msg from './Chat_msg.svelte';
import { socket, user } from './Chat_socket.svelte';
socket.on('message', (data) => {
console.log("received msg :");
console.log(data);
add_msg("other", data);
socket.on('message', (name, message) => {
console.log(name)
console.log(message)
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);