diff --git a/frontend/src/pages/chat/chat.ts b/frontend/src/pages/chat/chat.ts index 287df81..a83f478 100644 --- a/frontend/src/pages/chat/chat.ts +++ b/frontend/src/pages/chat/chat.ts @@ -3,24 +3,25 @@ import { showError } from "@app/toast"; import authHtml from './chat.html?raw'; import client from '@app/api' import { updateUser } from "@app/auth"; -import io from "socket.io-client" +import io from "socket.io-client"; // const socket = io("wss://localhost:8888"); -const socket = io("wss://localhost:8888", { - path: "/app/chat/socket.io/", - secure: false, - transports: ["websocket"], +const socket = io("wss://local.maix.me:8888", { + path: "/api/chat/socket.io/", + secure: true, + transports: ["websocket"], }); // Listen for the 'connect' event -socket.on("connect", () => { +socket.on("connect", async () => { console.log("Connected to the server: ", socket.id); - // Send a message to the server - socket.send("Hello from the client: " + `${socket.id}`); // Emit a custom event 'coucou' with some data socket.emit("coucou", { message: "Hello Nigel from coucou!" }); + console.log('sent coucou'); + // Send a message to the server + socket.send("Hello from the client: " + `${socket.id}`); }); @@ -33,33 +34,31 @@ type Providers = { }; function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn { - + setTitle('Chat Page'); // Listen for the 'connect' event return { - html: authHtml, postInsert: async (app) => { - + html: authHtml, postInsert: async (app) => { + const sendButton = document.getElementById('b-send') as HTMLButtonElement; const chatWindow = document.getElementById('t-chatbox') as HTMLDivElement; - const sendtextbox= document.getElementById('t-chat-window') as HTMLButtonElement; + const sendtextbox = document.getElementById('t-chat-window') as HTMLButtonElement; const blogout = document.getElementById('b-logout') as HTMLButtonElement; const bwhoami = document.getElementById('b-whoami') as HTMLButtonElement; const username = document.getElementById('username') as HTMLDivElement; - + const value = await client.chatTest(); - if (value.kind === "success") - { + if (value.kind === "success") { console.log(value.payload); } - else if (value.kind === "notLoggedIn") - { + else if (value.kind === "notLoggedIn") { } else { console.log('unknown response: ', value); } - + // Add a new message to the chat display const addMessage = (text: any) => { const messageElement = document.createElement('div'); @@ -67,16 +66,16 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn chatWindow.appendChild(messageElement); chatWindow.scrollTop = chatWindow.scrollHeight; //puts scroll to the bottom }; - - sendButton!.addEventListener('click', async () => { - let msgtext: string = sendtextbox.value; - if (msgtext) { - addMessage(msgtext); + sendButton!.addEventListener('click', async () => { + let msgtext: string = sendtextbox.value; + + if (msgtext) { + addMessage(msgtext); sendtextbox.value = ""; - } + } }); - + chatWindow.textContent = "helloWorld"; // Whoami button to display user name @@ -103,10 +102,10 @@ function handleChat(_url: string, _args: RouteHandlerParams): RouteHandlerReturn - + } } - + }; -addRoute('/chat', handleChat, { bypass_auth: true }); \ No newline at end of file +addRoute('/chat', handleChat, { bypass_auth: true }); diff --git a/nginx/conf/locations/chat.conf b/nginx/conf/locations/chat.conf index 8a7ea02..3500e4c 100644 --- a/nginx/conf/locations/chat.conf +++ b/nginx/conf/locations/chat.conf @@ -10,9 +10,5 @@ location /api/chat/socket.io/ { proxy_set_header Connection "Upgrade"; proxy_set_header Host $host; proxy_read_timeout 3600s; - root /volumes/static/chat; - proxy_pass http://chat$uri; - # proxy_pass http://chat; - - + proxy_pass http://chat; } diff --git a/src/chat/package.json b/src/chat/package.json index 95502b6..16f3b6c 100644 --- a/src/chat/package.json +++ b/src/chat/package.json @@ -28,6 +28,7 @@ "fastify": "^5.6.2", "fastify-cli": "^7.4.1", "fastify-plugin": "^5.1.0", + "fastify-socket.io": "^5.1.0", "socket.io": "^4.8.1" }, "devDependencies": { diff --git a/src/chat/src/app.ts b/src/chat/src/app.ts index 540667d..9591eef 100644 --- a/src/chat/src/app.ts +++ b/src/chat/src/app.ts @@ -5,6 +5,8 @@ import * as db from '@shared/database'; import * as auth from '@shared/auth'; import * as swagger from '@shared/swagger'; import * as utils from '@shared/utils'; +import { Server } from 'socket.io'; +import useSocketIo from 'fastify-socket.io'; declare const __SERVICE_NAME: string; @@ -15,8 +17,12 @@ const routes = import.meta.glob('./routes/**/*.ts', { eager: true }); // When using .decorate you have to specify added properties for Typescript declare module 'fastify' { - export interface FastifyInstance { - image_store: string; + interface FastifyInstance { + io: Server<{ + hello: (message: string) => string, + coucou: (data: { message: string }) => void, + message: (msg: string) => void, + }> } } @@ -27,6 +33,9 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise => { await fastify.register(db.useDatabase as FastifyPluginAsync, {}); await fastify.register(auth.jwtPlugin as FastifyPluginAsync, {}); await fastify.register(auth.authPlugin as FastifyPluginAsync, {}); + await fastify.register(useSocketIo, { + path: '/api/chat/socket.io', + }); // Place here your custom code! for (const plugin of Object.values(plugins)) { @@ -39,6 +48,22 @@ const app: FastifyPluginAsync = async (fastify, opts): Promise => { void fastify.register(fastifyFormBody, {}); void fastify.register(fastifyMultipart, {}); fastify.get('/monitoring', () => 'Ok'); + + fastify.ready((err) => { + if (err) throw err; + + fastify.io.on('connection', (socket) => { + console.info('Socket connected!', socket.id); + socket.on('hello', (value) => { + console.log(`GOT HELLO ${value}`); + return 'hi'; + }); + socket.on('message', (value) => console.log(`GOT MESSAGE ${value}`)); + socket.on('coucou', (value) => console.log(`GOT COUCOU ${value.message}`)); + }, + ); + + }); }; export default app; diff --git a/src/chat/src/routes/nginx-chat.ts b/src/chat/src/routes/nginx-chat.ts index 05a7ee4..710385b 100644 --- a/src/chat/src/routes/nginx-chat.ts +++ b/src/chat/src/routes/nginx-chat.ts @@ -1,26 +1,23 @@ import { FastifyPluginAsync } from 'fastify'; import { MakeStaticResponse, typeResponse } from '@shared/utils'; import { Type } from '@sinclair/typebox'; -import Fastify from 'fastify' -import { Server } from "socket.io" -import { Socket } from "socket.io"; +import Fastify from 'fastify'; +import { Server } from 'socket.io'; +import { Socket } from 'socket.io'; +import * as fsocketio from 'fastify-socket.io'; const fastify = Fastify(); const io = new Server(fastify.server, { - path: "/app/chat/socket.io/", - cors: { origin: "*" }, + path: '/app/chat/socket.io/', + cors: { origin: '*' }, }); - -io.on("connection", (socket: Socket) => { - console.log("testing") - console.log(`Client connected: ${socket.id}`); - socket.on("message", (data: any) => console.log(data, `socketID: ${socket.id}`)); - socket.once("message", () => socket.send("connected succesfully")); - socket.once("coucou", (data: any) => console.log(data)) +io.on('connection', (socket: Socket) => { + console.log('testing'); + console.log(`Client connected: ${socket.id}`); }); @@ -32,9 +29,24 @@ export const ChatRes = { }), }; + export type ChatResType = MakeStaticResponse; const route: FastifyPluginAsync = async (fastify): Promise => { + /* await fastify.register(fsocketio.default); + + fastify.get('/api/chat/socket.io', (req, reply) => { + console.log('GOT SOCKET ?!'); + + const socket = (fastify as any).io; + socket.emit('hello'); + socket.on('message', (data: any) => console.log(data, `socketID: ${socket.id}`)); + socket.once('message', () => socket.send('connected succesfully')); + socket.once('coucou', (data: any) => console.log(data)); + }); + */ + + fastify.get( '/api/chat/test', { diff --git a/src/pnpm-lock.yaml b/src/pnpm-lock.yaml index a54b33e..1731175 100644 --- a/src/pnpm-lock.yaml +++ b/src/pnpm-lock.yaml @@ -179,6 +179,9 @@ importers: fastify-plugin: specifier: ^5.1.0 version: 5.1.0 + fastify-socket.io: + specifier: ^5.1.0 + version: 5.1.0(fastify@5.6.2)(socket.io@4.8.1) socket.io: specifier: ^4.8.1 version: 4.8.1 @@ -1788,9 +1791,18 @@ packages: resolution: {integrity: sha512-7Jsfj2uLuGWvnxjrGDrHWpSm65+OcVx0ZbTD2wwkz6Wt6KjGm6+ZYwwpdXdwAlzbJYq+LCEMNvDJc4485AQ1vQ==} hasBin: true + fastify-plugin@4.5.1: + resolution: {integrity: sha512-stRHYGeuqpEZTL1Ef0Ovr2ltazUT9g844X5z/zEBFLG8RYlpDiOCIG+ATvYEp+/zmc7sN29mcIMp8gvYplYPIQ==} + fastify-plugin@5.1.0: resolution: {integrity: sha512-FAIDA8eovSt5qcDgcBvDuX/v0Cjz0ohGhENZ/wpc3y+oZCY2afZ9Baqql3g/lC+OHRnciQol4ww7tuthOb9idw==} + fastify-socket.io@5.1.0: + resolution: {integrity: sha512-GC1gjrxBGeTbMWV779XHF4uw3AtgKwSQJ9MnjGiMp91ZBuPXEdBYa7NnAMDEl3oZPgK9JO4BlNncTV+UAN+1kg==} + peerDependencies: + fastify: 4.x.x + socket.io: '>=4' + fastify@5.6.2: resolution: {integrity: sha512-dPugdGnsvYkBlENLhCgX8yhyGCsCPrpA8lFWbTNU428l+YOnLgYHR69hzV8HWPC79n536EqzqQtvhtdaCE0dKg==} @@ -4899,8 +4911,17 @@ snapshots: semver: 7.7.3 yargs-parser: 22.0.0 + fastify-plugin@4.5.1: {} + fastify-plugin@5.1.0: {} + fastify-socket.io@5.1.0(fastify@5.6.2)(socket.io@4.8.1): + dependencies: + fastify: 5.6.2 + fastify-plugin: 4.5.1 + socket.io: 4.8.1 + tslib: 2.8.1 + fastify@5.6.2: dependencies: '@fastify/ajv-compiler': 4.0.5