diff --git a/client/components/home/ping.jsx b/client/components/home/ping.jsx
index dd891af..6166921 100644
--- a/client/components/home/ping.jsx
+++ b/client/components/home/ping.jsx
@@ -1,12 +1,74 @@
-import { useState } from 'react';
+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)'}
);
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/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
index 6abc034..27fe785 100644
--- a/server/providers/gateways/ping.gateway.ts
+++ b/server/providers/gateways/ping.gateway.ts
@@ -1,11 +1,67 @@
-import { SubscribeMessage, WebSocketGateway } from '@nestjs/websockets';
+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()
-export class PingGateway {
- constructor() {}
+@UseGuards(GatewayAuthGuard)
+export class PingGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
+ @WebSocketServer()
+ server: Server;
- @SubscribeMessage('ping/:id')
- public handlePing() {
- return { message: 'recieved ping' };
+ 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;
+ }
+}