diff --git a/client/components/home/_home.jsx b/client/components/home/_home.jsx index 4b1ab46..405a968 100644 --- a/client/components/home/_home.jsx +++ b/client/components/home/_home.jsx @@ -4,6 +4,7 @@ import { ApiContext } from '../../utils/api_context'; import { AuthContext } from '../../utils/auth_context'; import { RolesContext } from '../../utils/roles_context'; import { Button } from '../common/button'; +import { Ping } from './ping'; export const Home = () => { const [, setAuthToken] = useContext(AuthContext); @@ -42,6 +43,9 @@ export const Home = () => { Admin )} +
+ +
); }; diff --git a/client/components/home/ping.jsx b/client/components/home/ping.jsx new file mode 100644 index 0000000..6166921 --- /dev/null +++ b/client/components/home/ping.jsx @@ -0,0 +1,84 @@ +import { useState, useEffect, useRef, useContext } from 'react'; +import { Button } from '../common/button'; +import { io } from 'socket.io-client'; +import { AuthContext } from '../../utils/auth_context'; + +export const Ping = () => { + const [pings, setPings] = useState([]); + const [key, setKey] = useState('defaultkey'); + const [currentRoom, setCurrentRoom] = useState(null); + const [authToken] = useContext(AuthContext); + const [socket, setSocket] = useState(null); + + useEffect(() => { + // instantiates a socket object and initiates the connection... + // you probably want to make sure you are only doing this in one component at a time. + const socket = io({ + auth: { token: authToken }, + query: { message: 'I am the query ' }, + }); + + // adds an event listener to the connection event + socket.on('connect', () => { + setSocket(socket); + }); + + // adds event listener to the disconnection event + socket.on('disconnect', () => { + console.log('Disconnected'); + }); + + // recieved a pong event from the server + socket.on('pong', (data) => { + console.log('Recieved pong', data); + }); + + // IMPORTANT! Unregister from all events when the component unmounts and disconnect. + return () => { + socket.off('connect'); + socket.off('disconnect'); + socket.off('pong'); + socket.disconnect(); + }; + }, []); + + useEffect(() => { + // if our token changes we need to tell the socket also + if (socket) { + // this is a little weird because we are modifying this object in memory + // i dunno a better way to do this though... + socket.auth.token = authToken; + } + }, [authToken]); + + if (!socket) return 'Loading...'; + + const sendPing = () => { + // sends a ping to the server to be broadcast to everybody in the room + currentRoom && socket.emit('ping', { currentRoom }); + }; + + const joinRoom = () => { + // tells the server to remove the current client from the current room and add them to the new room + socket.emit('join-room', { currentRoom, newRoom: key }, (response) => { + console.log(response); + setCurrentRoom(response.room); + }); + }; + + return ( + <> +
Ping: {currentRoom || '(No room joined)'}
+
+ setKey(e.target.value)} + /> + + +
+ + ); +}; diff --git a/client/package.json b/client/package.json index 8affa3a..6dd0978 100644 --- a/client/package.json +++ b/client/package.json @@ -17,6 +17,7 @@ "dependencies": { "react": "^17.0.2", "react-dom": "^17.0.2", - "react-router-dom": "6" + "react-router-dom": "6", + "socket.io-client": "^4.4.1" } } diff --git a/client/utils/use_jwt_refresh.js b/client/utils/use_jwt_refresh.js index b2233b8..11d4122 100644 --- a/client/utils/use_jwt_refresh.js +++ b/client/utils/use_jwt_refresh.js @@ -12,7 +12,7 @@ export const useJwtRefresh = (authToken, setAuthToken) => { } else { setAuthToken(null); } - }, 60000 * 0.5); // 10 minutes + }, 60000 * 10); // 10 minutes } return () => clearTimeout(refreshTimer.current); }, [authToken]); diff --git a/client/yarn.lock b/client/yarn.lock index 679a725..ce2984f 100644 --- a/client/yarn.lock +++ b/client/yarn.lock @@ -603,6 +603,16 @@ chrome-trace-event "^1.0.2" nullthrows "^1.1.1" +"@socket.io/base64-arraybuffer@~1.0.2": + version "1.0.2" + resolved "https://registry.yarnpkg.com/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#568d9beae00b0d835f4f8c53fd55714986492e61" + integrity sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ== + +"@socket.io/component-emitter@~3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz#8863915676f837d9dad7b76f50cb500c1e9422e9" + integrity sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q== + "@swc/helpers@^0.2.11": version "0.2.14" resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.2.14.tgz#20288c3627442339dd3d743c944f7043ee3590f0" @@ -686,6 +696,11 @@ autoprefixer@^10.4.0: picocolors "^1.0.0" postcss-value-parser "^4.2.0" +backo2@~1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947" + integrity sha1-MasayLEpNjRj41s+u2n038+6eUc= + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" @@ -989,6 +1004,13 @@ csso@^4.2.0: dependencies: css-tree "^1.1.2" +debug@~4.3.1, debug@~4.3.2: + version "4.3.3" + resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.3.tgz#04266e0b70a98d4462e6e288e38259213332b664" + integrity sha512-/zxw5+vh1Tfv+4Qn7a5nsbcJKPaSvCDhojn6FEl9vupwK2VCSDtEiEtqr8DFtzYFOdz63LBkxec7DYuc2jon6Q== + dependencies: + ms "2.1.2" + defined@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" @@ -1063,6 +1085,28 @@ electron-to-chromium@^1.4.71: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd" integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q== +engine.io-client@~6.1.1: + version "6.1.1" + resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.1.1.tgz#800d4b9db5487d169686729e5bd887afa78d36b0" + integrity sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g== + dependencies: + "@socket.io/component-emitter" "~3.0.0" + debug "~4.3.1" + engine.io-parser "~5.0.0" + has-cors "1.1.0" + parseqs "0.0.6" + parseuri "0.0.6" + ws "~8.2.3" + xmlhttprequest-ssl "~2.0.0" + yeast "0.1.2" + +engine.io-parser@~5.0.0: + version "5.0.3" + resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.3.tgz#ca1f0d7b11e290b4bfda251803baea765ed89c09" + integrity sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg== + dependencies: + "@socket.io/base64-arraybuffer" "~1.0.2" + entities@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" @@ -1187,6 +1231,11 @@ graceful-fs@^4.1.6, graceful-fs@^4.2.0: resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a" integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== +has-cors@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/has-cors/-/has-cors-1.1.0.tgz#5e474793f7ea9843d1bb99c23eef49ff126fff39" + integrity sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk= + has-flag@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" @@ -1457,6 +1506,11 @@ modern-normalize@^1.1.0: resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7" integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== +ms@2.1.2: + version "2.1.2" + resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" + integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== + msgpackr-extract@^1.0.14: version "1.0.16" resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-1.0.16.tgz#701c4f6e6f25c100ae84557092274e8fffeefe45" @@ -1590,6 +1644,16 @@ parse-json@^5.0.0: json-parse-even-better-errors "^2.3.0" lines-and-columns "^1.1.6" +parseqs@0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.6.tgz#8e4bb5a19d1cdc844a08ac974d34e273afa670d5" + integrity sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w== + +parseuri@0.0.6: + version "0.0.6" + resolved "https://registry.yarnpkg.com/parseuri/-/parseuri-0.0.6.tgz#e1496e829e3ac2ff47f39a4dd044b32823c4a25a" + integrity sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow== + path-is-absolute@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" @@ -2067,6 +2131,26 @@ simple-swizzle@^0.2.2: dependencies: is-arrayish "^0.3.1" +socket.io-client@^4.4.1: + version "4.4.1" + resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.4.1.tgz#b6aa9448149d09b8d0b2bbf3d2fac310631fdec9" + integrity sha512-N5C/L5fLNha5Ojd7Yeb/puKcPWWcoB/A09fEjjNsg91EDVr5twk/OEyO6VT9dlLSUNY85NpW6KBhVMvaLKQ3vQ== + dependencies: + "@socket.io/component-emitter" "~3.0.0" + backo2 "~1.0.2" + debug "~4.3.2" + engine.io-client "~6.1.1" + parseuri "0.0.6" + socket.io-parser "~4.1.1" + +socket.io-parser@~4.1.1: + version "4.1.2" + resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.1.2.tgz#0a97d4fb8e67022158a568450a6e41887e42035e" + integrity sha512-j3kk71QLJuyQ/hh5F/L2t1goqzdTL0gvDzuhTuNSwihfuFUrcSji0qFZmJJPtG6Rmug153eOPsUizeirf1IIog== + dependencies: + "@socket.io/component-emitter" "~3.0.0" + debug "~4.3.1" + source-map-js@^0.6.2: version "0.6.2" resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" @@ -2237,6 +2321,16 @@ wrappy@1: resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= +ws@~8.2.3: + version "8.2.3" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba" + integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA== + +xmlhttprequest-ssl@~2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67" + integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A== + xtend@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" @@ -2251,3 +2345,8 @@ yaml@^1.10.0, yaml@^1.10.2: version "1.10.2" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== + +yeast@0.1.2: + version "0.1.2" + resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419" + integrity sha1-AI4G2AlDIMNy28L47XagymyKxBk= diff --git a/server/app.module.ts b/server/app.module.ts index d0135c1..bbc3c1c 100644 --- a/server/app.module.ts +++ b/server/app.module.ts @@ -4,6 +4,7 @@ import { TypeOrmModule } from '@nestjs/typeorm'; import { AppController } from './app.controller'; import { config } from './database/config'; import { UsersModule } from './modules/users.module'; +import { PingGateway } from './providers/gateways/ping.gateway'; import { AuthGuard } from './providers/guards/auth.guard'; import { RolesGuard } from './providers/guards/roles.guard'; import { JwtService } from './providers/services/jwt.service'; @@ -15,6 +16,7 @@ import { GuardUtil } from './providers/util/guard.util'; imports: [TypeOrmModule.forRoot(config), UsersModule], controllers: [AppController], providers: [ + PingGateway, UsersService, RolesService, JwtService, diff --git a/server/decorators/gateway_jwt_body.decorator.ts b/server/decorators/gateway_jwt_body.decorator.ts new file mode 100644 index 0000000..c31b47e --- /dev/null +++ b/server/decorators/gateway_jwt_body.decorator.ts @@ -0,0 +1,6 @@ +import { createParamDecorator, ExecutionContext } from '@nestjs/common'; +import { Socket } from 'socket.io'; +export const GatewayJwtBody = createParamDecorator((data: unknown, ctx: ExecutionContext) => { + const req = ctx.switchToHttp().getRequest() as Socket; + return req.handshake.auth.jwtBody; +}); diff --git a/server/providers/gateways/ping.gateway.ts b/server/providers/gateways/ping.gateway.ts new file mode 100644 index 0000000..27fe785 --- /dev/null +++ b/server/providers/gateways/ping.gateway.ts @@ -0,0 +1,67 @@ +import { UseGuards } from '@nestjs/common'; +import { ConnectedSocket, MessageBody, OnGatewayConnection, OnGatewayDisconnect, OnGatewayInit, SubscribeMessage, WebSocketGateway, WebSocketServer, WsException } from '@nestjs/websockets'; +import { GatewayJwtBody } from 'server/decorators/gateway_jwt_body.decorator'; +import { JwtBodyDto } from 'server/dto/jwt_body.dto'; +import { Server, Socket } from 'socket.io'; +import { GatewayAuthGuard } from '../guards/gatewayauth.guard'; +import { JwtService } from '../services/jwt.service'; + +class JoinPayload { + currentRoom?: string; + newRoom: string; +} + +class PingPayload { + currentRoom: string; +} + +@WebSocketGateway() +@UseGuards(GatewayAuthGuard) +export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect { + @WebSocketServer() + server: Server; + + constructor(private jwtService: JwtService) {} + + afterInit(server: Server) { + console.log('Sockets initialized'); + } + + handleConnection(client: Socket) { + // you can do things like add users to rooms + // or emit events here. + // IMPORTANT! The GatewayAuthGuard doesn't trigger on these handlers + // if you need to do anything in this method you need to authenticate the JWT + // manually. + try { + const jwt = client.handshake.auth.token; + const jwtBody = this.jwtService.parseToken(jwt); + console.log(client.handshake.query); + console.log('Client Connected: ', jwtBody.userId); + } catch (e) { + throw new WsException('Invalid token'); + } + } + + handleDisconnect(client: Socket) { + console.log('Client Disconnected'); + } + + @SubscribeMessage('ping') + public handlePing( + @ConnectedSocket() client: Socket, + @MessageBody() payload: PingPayload, + @GatewayJwtBody() jwtBody: JwtBodyDto, + ) { + this.server.to(payload.currentRoom).emit('pong', { message: { userId: jwtBody.userId } }); + console.log(client.rooms); + } + + @SubscribeMessage('join-room') + public async joinRoom(client: Socket, payload: JoinPayload) { + console.log(payload); + payload.currentRoom && (await client.leave(payload.currentRoom)); + await client.join(payload.newRoom); + return { msg: 'Joined room', room: payload.newRoom }; + } +} diff --git a/server/providers/guards/gatewayauth.guard.ts b/server/providers/guards/gatewayauth.guard.ts new file mode 100644 index 0000000..0843752 --- /dev/null +++ b/server/providers/guards/gatewayauth.guard.ts @@ -0,0 +1,27 @@ +import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common'; +import { JwtService } from '../services/jwt.service'; +import { GuardUtil } from '../util/guard.util'; +import { Socket } from 'socket.io'; +import { WsException } from '@nestjs/websockets'; + +@Injectable() +export class GatewayAuthGuard implements CanActivate { + constructor(private guardUtil: GuardUtil, private jwtService: JwtService) {} + + canActivate(context: ExecutionContext) { + // Handlers and Controllers can both skip this guard in the event that + if (this.guardUtil.shouldSkip(this, context)) { + return true; + } + + const req = context.switchToHttp().getRequest() as Socket; + const jwt = req.handshake.auth.token; + if (!jwt) throw new WsException('Invalid auth token'); + try { + req.handshake.auth.jwtBody = this.jwtService.parseToken(jwt); + } catch (e) { + throw new WsException('Invalid auth token'); + } + return true; + } +}