Merge pull request #4 from dittonjs/jd/add-websockets

Jd/add websockets
This commit is contained in:
dittonjs 2022-03-08 18:25:58 -07:00 committed by GitHub
commit 5e2996c0fd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 292 additions and 2 deletions

View File

@ -4,6 +4,7 @@ import { ApiContext } from '../../utils/api_context';
import { AuthContext } from '../../utils/auth_context'; import { AuthContext } from '../../utils/auth_context';
import { RolesContext } from '../../utils/roles_context'; import { RolesContext } from '../../utils/roles_context';
import { Button } from '../common/button'; import { Button } from '../common/button';
import { Ping } from './ping';
export const Home = () => { export const Home = () => {
const [, setAuthToken] = useContext(AuthContext); const [, setAuthToken] = useContext(AuthContext);
@ -42,6 +43,9 @@ export const Home = () => {
Admin Admin
</Button> </Button>
)} )}
<section>
<Ping />
</section>
</div> </div>
); );
}; };

View File

@ -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 (
<>
<header>Ping: {currentRoom || '(No room joined)'}</header>
<section>
<input
type="text"
className="border-2 border-gray-700 p-2 rounded"
value={key}
onChange={(e) => setKey(e.target.value)}
/>
<Button onClick={joinRoom}>Connect To Room</Button>
<Button onClick={sendPing}>Send Ping</Button>
</section>
</>
);
};

View File

@ -17,6 +17,7 @@
"dependencies": { "dependencies": {
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-router-dom": "6" "react-router-dom": "6",
"socket.io-client": "^4.4.1"
} }
} }

View File

@ -12,7 +12,7 @@ export const useJwtRefresh = (authToken, setAuthToken) => {
} else { } else {
setAuthToken(null); setAuthToken(null);
} }
}, 60000 * 0.5); // 10 minutes }, 60000 * 10); // 10 minutes
} }
return () => clearTimeout(refreshTimer.current); return () => clearTimeout(refreshTimer.current);
}, [authToken]); }, [authToken]);

View File

@ -603,6 +603,16 @@
chrome-trace-event "^1.0.2" chrome-trace-event "^1.0.2"
nullthrows "^1.1.1" 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": "@swc/helpers@^0.2.11":
version "0.2.14" version "0.2.14"
resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.2.14.tgz#20288c3627442339dd3d743c944f7043ee3590f0" 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" picocolors "^1.0.0"
postcss-value-parser "^4.2.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: balanced-match@^1.0.0:
version "1.0.2" version "1.0.2"
resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee" resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
@ -989,6 +1004,13 @@ csso@^4.2.0:
dependencies: dependencies:
css-tree "^1.1.2" 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: defined@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693" 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" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.75.tgz#d1ad9bb46f2f1bf432118c2be21d27ffeae82fdd"
integrity sha512-LxgUNeu3BVU7sXaKjUDD9xivocQLxFtq6wgERrutdY/yIOps3ODOZExK1jg8DTEg4U8TUCb5MLGeWFOYuxjF3Q== 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: entities@^2.0.0:
version "2.2.0" version "2.2.0"
resolved "https://registry.yarnpkg.com/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" 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" resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.8.tgz#e412b8d33f5e006593cbd3cee6df9f2cebbe802a"
integrity sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg== 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: has-flag@^3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd" 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" resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7"
integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== 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: msgpackr-extract@^1.0.14:
version "1.0.16" version "1.0.16"
resolved "https://registry.yarnpkg.com/msgpackr-extract/-/msgpackr-extract-1.0.16.tgz#701c4f6e6f25c100ae84557092274e8fffeefe45" 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" json-parse-even-better-errors "^2.3.0"
lines-and-columns "^1.1.6" 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: path-is-absolute@^1.0.0:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f" 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: dependencies:
is-arrayish "^0.3.1" 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: source-map-js@^0.6.2:
version "0.6.2" version "0.6.2"
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" 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" resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= 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: xtend@^4.0.2:
version "4.0.2" version "4.0.2"
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" 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" version "1.10.2"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b" resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.2.tgz#2301c5ffbf12b467de8da2333a459e29e7920e4b"
integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg== 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=

View File

@ -4,6 +4,7 @@ import { TypeOrmModule } from '@nestjs/typeorm';
import { AppController } from './app.controller'; import { AppController } from './app.controller';
import { config } from './database/config'; import { config } from './database/config';
import { UsersModule } from './modules/users.module'; import { UsersModule } from './modules/users.module';
import { PingGateway } from './providers/gateways/ping.gateway';
import { AuthGuard } from './providers/guards/auth.guard'; import { AuthGuard } from './providers/guards/auth.guard';
import { RolesGuard } from './providers/guards/roles.guard'; import { RolesGuard } from './providers/guards/roles.guard';
import { JwtService } from './providers/services/jwt.service'; import { JwtService } from './providers/services/jwt.service';
@ -15,6 +16,7 @@ import { GuardUtil } from './providers/util/guard.util';
imports: [TypeOrmModule.forRoot(config), UsersModule], imports: [TypeOrmModule.forRoot(config), UsersModule],
controllers: [AppController], controllers: [AppController],
providers: [ providers: [
PingGateway,
UsersService, UsersService,
RolesService, RolesService,
JwtService, JwtService,

View File

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

View File

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

View File

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