├── .dockerignore ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── docker-compose.yml ├── index.js ├── package-lock.json ├── package.json └── web ├── .babelrc ├── .dockerignore ├── .gitignore ├── Dockerfile ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts └── setupTests.ts ├── tsconfig.json └── yarn.lock /.dockerignore: -------------------------------------------------------------------------------- 1 | .git 2 | .gitignore 3 | README.md 4 | docker-compose.yml 5 | node_modules 6 | web -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | .idea 26 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | RUN npm install -g nodemon 4 | RUN mkdir -p /usr/src/app 5 | WORKDIR /usr/src/app 6 | 7 | COPY package*.json ./ 8 | RUN npm install 9 | 10 | COPY . . 11 | 12 | EXPOSE 8080 13 | CMD [ "nodemon" ] 14 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Seungmin Lee 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Typescript-ReactJS-WebRTC-1-1-P2P 2 | 3 | ## Features 4 | - 1:1 communication (peer to peer) 5 | - React with Typescript 6 | - Docker 7 | 8 | ## How to start 9 | ### 1. Docker version 10 | ```sh 11 | # server use 8080 port 12 | # web use 8085 port 13 | # You can connect to http://localhost:8085 14 | docker-compose up -d 15 | ``` 16 | 17 | ### 2. Non-Docker version(Node.js and React.js) 18 | You need to install Node.js 19 | ```sh 20 | cd Typescript-ReactJS-WebRTC-1-1-P2P 21 | npm install 22 | node index.js 23 | cd web 24 | npm install 25 | npm start 26 | ``` 27 | 28 | ### More Details are in my blog... 29 | - [Korean](https://millo-l.github.io/WebRTC-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-1-1-P2P/) 30 | - [English](https://millo-l.github.io/Implementing-WebRTC-using-ReactJS-and-Typescript-1-1-P2P/) 31 | 32 | 33 | ### Next Upload is... 34 | - 1:N communication (peer to peer) https://github.com/Seung3837/Typescript-ReactJS-WebRTC-1-N-P2P 35 | - 1:N communication (SFU Server as a MediaServer) https://github.com/Seung3837/Typescript-ReactJS-WebRTC-1-N-SFU 36 | -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | version: '3.5' 2 | services: 3 | server: 4 | build: . 5 | environment: 6 | - PORT=8080 7 | ports: 8 | - "8080:8080" 9 | networks: 10 | - docker-net 11 | web: 12 | build: 13 | context: ./web 14 | stdin_open: true 15 | tty: true 16 | ports: 17 | - "8085:5000" 18 | networks: 19 | - docker-net 20 | networks: 21 | docker-net: 22 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | let express = require("express"); 2 | let http = require("http"); 3 | let app = express(); 4 | let cors = require("cors"); 5 | let server = http.createServer(app); 6 | let socketio = require("socket.io"); 7 | let io = socketio.listen(server); 8 | 9 | app.use(cors()); 10 | const PORT = process.env.PORT || 8080; 11 | 12 | let users = {}; 13 | 14 | let socketToRoom = {}; 15 | 16 | const maximum = 2; 17 | 18 | io.on("connection", (socket) => { 19 | socket.on("join_room", (data) => { 20 | if (users[data.room]) { 21 | const length = users[data.room].length; 22 | if (length === maximum) { 23 | socket.to(socket.id).emit("room_full"); 24 | return; 25 | } 26 | users[data.room].push({ id: socket.id }); 27 | } else { 28 | users[data.room] = [{ id: socket.id }]; 29 | } 30 | socketToRoom[socket.id] = data.room; 31 | 32 | socket.join(data.room); 33 | console.log(`[${socketToRoom[socket.id]}]: ${socket.id} enter`); 34 | 35 | const usersInThisRoom = users[data.room].filter( 36 | (user) => user.id !== socket.id 37 | ); 38 | 39 | console.log(usersInThisRoom); 40 | 41 | io.sockets.to(socket.id).emit("all_users", usersInThisRoom); 42 | }); 43 | 44 | socket.on("offer", (sdp) => { 45 | console.log("offer: " + socket.id); 46 | socket.broadcast.emit("getOffer", sdp); 47 | }); 48 | 49 | socket.on("answer", (sdp) => { 50 | console.log("answer: " + socket.id); 51 | socket.broadcast.emit("getAnswer", sdp); 52 | }); 53 | 54 | socket.on("candidate", (candidate) => { 55 | console.log("candidate: " + socket.id); 56 | socket.broadcast.emit("getCandidate", candidate); 57 | }); 58 | 59 | socket.on("disconnect", () => { 60 | console.log(`[${socketToRoom[socket.id]}]: ${socket.id} exit`); 61 | const roomID = socketToRoom[socket.id]; 62 | let room = users[roomID]; 63 | if (room) { 64 | room = room.filter((user) => user.id !== socket.id); 65 | users[roomID] = room; 66 | if (room.length === 0) { 67 | delete users[roomID]; 68 | return; 69 | } 70 | } 71 | socket.broadcast.to(room).emit("user_exit", { id: socket.id }); 72 | console.log(users); 73 | }); 74 | }); 75 | 76 | server.listen(PORT, () => { 77 | console.log(`server running on ${PORT}`); 78 | }); 79 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "socket_server", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.7", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", 10 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", 11 | "requires": { 12 | "mime-types": "~2.1.24", 13 | "negotiator": "0.6.2" 14 | } 15 | }, 16 | "after": { 17 | "version": "0.8.2", 18 | "resolved": "https://registry.npmjs.org/after/-/after-0.8.2.tgz", 19 | "integrity": "sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=" 20 | }, 21 | "array-flatten": { 22 | "version": "1.1.1", 23 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 24 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 25 | }, 26 | "arraybuffer.slice": { 27 | "version": "0.0.7", 28 | "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz", 29 | "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==" 30 | }, 31 | "async-limiter": { 32 | "version": "1.0.1", 33 | "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz", 34 | "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==" 35 | }, 36 | "backo2": { 37 | "version": "1.0.2", 38 | "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz", 39 | "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc=" 40 | }, 41 | "base64-arraybuffer": { 42 | "version": "0.1.4", 43 | "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.4.tgz", 44 | "integrity": "sha1-mBjHngWbE1X5fgQooBfIOOkLqBI=" 45 | }, 46 | "base64id": { 47 | "version": "2.0.0", 48 | "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz", 49 | "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog==" 50 | }, 51 | "better-assert": { 52 | "version": "1.0.2", 53 | "resolved": "https://registry.npmjs.org/better-assert/-/better-assert-1.0.2.tgz", 54 | "integrity": "sha1-QIZrnhueC1W0gYlDEeaPr/rrxSI=", 55 | "requires": { 56 | "callsite": "1.0.0" 57 | } 58 | }, 59 | "blob": { 60 | "version": "0.0.5", 61 | "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.5.tgz", 62 | "integrity": "sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==" 63 | }, 64 | "body-parser": { 65 | "version": "1.19.0", 66 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz", 67 | "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==", 68 | "requires": { 69 | "bytes": "3.1.0", 70 | "content-type": "~1.0.4", 71 | "debug": "2.6.9", 72 | "depd": "~1.1.2", 73 | "http-errors": "1.7.2", 74 | "iconv-lite": "0.4.24", 75 | "on-finished": "~2.3.0", 76 | "qs": "6.7.0", 77 | "raw-body": "2.4.0", 78 | "type-is": "~1.6.17" 79 | }, 80 | "dependencies": { 81 | "debug": { 82 | "version": "2.6.9", 83 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 84 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 85 | "requires": { 86 | "ms": "2.0.0" 87 | } 88 | }, 89 | "ms": { 90 | "version": "2.0.0", 91 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 92 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 93 | } 94 | } 95 | }, 96 | "bytes": { 97 | "version": "3.1.0", 98 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz", 99 | "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==" 100 | }, 101 | "callsite": { 102 | "version": "1.0.0", 103 | "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz", 104 | "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=" 105 | }, 106 | "component-bind": { 107 | "version": "1.0.0", 108 | "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz", 109 | "integrity": "sha1-AMYIq33Nk4l8AAllGx06jh5zu9E=" 110 | }, 111 | "component-emitter": { 112 | "version": "1.2.1", 113 | "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz", 114 | "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY=" 115 | }, 116 | "component-inherit": { 117 | "version": "0.0.3", 118 | "resolved": "https://registry.npmjs.org/component-inherit/-/component-inherit-0.0.3.tgz", 119 | "integrity": "sha1-ZF/ErfWLcrZJ1crmUTVhnbJv8UM=" 120 | }, 121 | "content-disposition": { 122 | "version": "0.5.3", 123 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz", 124 | "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==", 125 | "requires": { 126 | "safe-buffer": "5.1.2" 127 | } 128 | }, 129 | "content-type": { 130 | "version": "1.0.4", 131 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 132 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 133 | }, 134 | "cookie": { 135 | "version": "0.3.1", 136 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 137 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 138 | }, 139 | "cookie-signature": { 140 | "version": "1.0.6", 141 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 142 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 143 | }, 144 | "cors": { 145 | "version": "2.8.5", 146 | "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz", 147 | "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==", 148 | "requires": { 149 | "object-assign": "^4", 150 | "vary": "^1" 151 | } 152 | }, 153 | "debug": { 154 | "version": "4.1.1", 155 | "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", 156 | "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", 157 | "requires": { 158 | "ms": "^2.1.1" 159 | } 160 | }, 161 | "depd": { 162 | "version": "1.1.2", 163 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 164 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 165 | }, 166 | "destroy": { 167 | "version": "1.0.4", 168 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 169 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 170 | }, 171 | "ee-first": { 172 | "version": "1.1.1", 173 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 174 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 175 | }, 176 | "encodeurl": { 177 | "version": "1.0.2", 178 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 179 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 180 | }, 181 | "engine.io": { 182 | "version": "3.4.2", 183 | "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-3.4.2.tgz", 184 | "integrity": "sha512-b4Q85dFkGw+TqgytGPrGgACRUhsdKc9S9ErRAXpPGy/CXKs4tYoHDkvIRdsseAF7NjfVwjRFIn6KTnbw7LwJZg==", 185 | "requires": { 186 | "accepts": "~1.3.4", 187 | "base64id": "2.0.0", 188 | "cookie": "0.3.1", 189 | "debug": "~4.1.0", 190 | "engine.io-parser": "~2.2.0", 191 | "ws": "^7.1.2" 192 | } 193 | }, 194 | "engine.io-client": { 195 | "version": "3.4.4", 196 | "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-3.4.4.tgz", 197 | "integrity": "sha512-iU4CRr38Fecj8HoZEnFtm2EiKGbYZcPn3cHxqNGl/tmdWRf60KhK+9vE0JeSjgnlS/0oynEfLgKbT9ALpim0sQ==", 198 | "requires": { 199 | "component-emitter": "~1.3.0", 200 | "component-inherit": "0.0.3", 201 | "debug": "~3.1.0", 202 | "engine.io-parser": "~2.2.0", 203 | "has-cors": "1.1.0", 204 | "indexof": "0.0.1", 205 | "parseqs": "0.0.6", 206 | "parseuri": "0.0.6", 207 | "ws": "~6.1.0", 208 | "xmlhttprequest-ssl": "~1.5.4", 209 | "yeast": "0.1.2" 210 | }, 211 | "dependencies": { 212 | "component-emitter": { 213 | "version": "1.3.0", 214 | "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", 215 | "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" 216 | }, 217 | "debug": { 218 | "version": "3.1.0", 219 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", 220 | "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", 221 | "requires": { 222 | "ms": "2.0.0" 223 | } 224 | }, 225 | "ms": { 226 | "version": "2.0.0", 227 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 228 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 229 | }, 230 | "parseqs": { 231 | "version": "0.0.6", 232 | "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz", 233 | "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w==" 234 | }, 235 | "parseuri": { 236 | "version": "0.0.6", 237 | "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz", 238 | "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow==" 239 | }, 240 | "ws": { 241 | "version": "6.1.4", 242 | "resolved": "https://registry.npmjs.org/ws/-/ws-6.1.4.tgz", 243 | "integrity": "sha512-eqZfL+NE/YQc1/ZynhojeV8q+H050oR8AZ2uIev7RU10svA9ZnJUddHcOUZTJLinZ9yEfdA2kSATS2qZK5fhJA==", 244 | "requires": { 245 | "async-limiter": "~1.0.0" 246 | } 247 | } 248 | } 249 | }, 250 | "engine.io-parser": { 251 | "version": "2.2.1", 252 | "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-2.2.1.tgz", 253 | "integrity": "sha512-x+dN/fBH8Ro8TFwJ+rkB2AmuVw9Yu2mockR/p3W8f8YtExwFgDvBDi0GWyb4ZLkpahtDGZgtr3zLovanJghPqg==", 254 | "requires": { 255 | "after": "0.8.2", 256 | "arraybuffer.slice": "~0.0.7", 257 | "base64-arraybuffer": "0.1.4", 258 | "blob": "0.0.5", 259 | "has-binary2": "~1.0.2" 260 | } 261 | }, 262 | "escape-html": { 263 | "version": "1.0.3", 264 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 265 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 266 | }, 267 | "etag": { 268 | "version": "1.8.1", 269 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 270 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 271 | }, 272 | "express": { 273 | "version": "4.17.1", 274 | "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz", 275 | "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==", 276 | "requires": { 277 | "accepts": "~1.3.7", 278 | "array-flatten": "1.1.1", 279 | "body-parser": "1.19.0", 280 | "content-disposition": "0.5.3", 281 | "content-type": "~1.0.4", 282 | "cookie": "0.4.0", 283 | "cookie-signature": "1.0.6", 284 | "debug": "2.6.9", 285 | "depd": "~1.1.2", 286 | "encodeurl": "~1.0.2", 287 | "escape-html": "~1.0.3", 288 | "etag": "~1.8.1", 289 | "finalhandler": "~1.1.2", 290 | "fresh": "0.5.2", 291 | "merge-descriptors": "1.0.1", 292 | "methods": "~1.1.2", 293 | "on-finished": "~2.3.0", 294 | "parseurl": "~1.3.3", 295 | "path-to-regexp": "0.1.7", 296 | "proxy-addr": "~2.0.5", 297 | "qs": "6.7.0", 298 | "range-parser": "~1.2.1", 299 | "safe-buffer": "5.1.2", 300 | "send": "0.17.1", 301 | "serve-static": "1.14.1", 302 | "setprototypeof": "1.1.1", 303 | "statuses": "~1.5.0", 304 | "type-is": "~1.6.18", 305 | "utils-merge": "1.0.1", 306 | "vary": "~1.1.2" 307 | }, 308 | "dependencies": { 309 | "cookie": { 310 | "version": "0.4.0", 311 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz", 312 | "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==" 313 | }, 314 | "debug": { 315 | "version": "2.6.9", 316 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 317 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 318 | "requires": { 319 | "ms": "2.0.0" 320 | } 321 | }, 322 | "ms": { 323 | "version": "2.0.0", 324 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 325 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 326 | } 327 | } 328 | }, 329 | "finalhandler": { 330 | "version": "1.1.2", 331 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz", 332 | "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==", 333 | "requires": { 334 | "debug": "2.6.9", 335 | "encodeurl": "~1.0.2", 336 | "escape-html": "~1.0.3", 337 | "on-finished": "~2.3.0", 338 | "parseurl": "~1.3.3", 339 | "statuses": "~1.5.0", 340 | "unpipe": "~1.0.0" 341 | }, 342 | "dependencies": { 343 | "debug": { 344 | "version": "2.6.9", 345 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 346 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 347 | "requires": { 348 | "ms": "2.0.0" 349 | } 350 | }, 351 | "ms": { 352 | "version": "2.0.0", 353 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 354 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 355 | } 356 | } 357 | }, 358 | "forwarded": { 359 | "version": "0.1.2", 360 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 361 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 362 | }, 363 | "fresh": { 364 | "version": "0.5.2", 365 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 366 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 367 | }, 368 | "has-binary2": { 369 | "version": "1.0.3", 370 | "resolved": "https://registry.npmjs.org/has-binary2/-/has-binary2-1.0.3.tgz", 371 | "integrity": "sha512-G1LWKhDSvhGeAQ8mPVQlqNcOB2sJdwATtZKl2pDKKHfpf/rYj24lkinxf69blJbnsvtqqNU+L3SL50vzZhXOnw==", 372 | "requires": { 373 | "isarray": "2.0.1" 374 | } 375 | }, 376 | "has-cors": { 377 | "version": "1.1.0", 378 | "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz", 379 | "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk=" 380 | }, 381 | "http": { 382 | "version": "0.0.1-security", 383 | "resolved": "https://registry.npmjs.org/http/-/http-0.0.1-security.tgz", 384 | "integrity": "sha512-RnDvP10Ty9FxqOtPZuxtebw1j4L/WiqNMDtuc1YMH1XQm5TgDRaR1G9u8upL6KD1bXHSp9eSXo/ED+8Q7FAr+g==" 385 | }, 386 | "http-errors": { 387 | "version": "1.7.2", 388 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz", 389 | "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==", 390 | "requires": { 391 | "depd": "~1.1.2", 392 | "inherits": "2.0.3", 393 | "setprototypeof": "1.1.1", 394 | "statuses": ">= 1.5.0 < 2", 395 | "toidentifier": "1.0.0" 396 | } 397 | }, 398 | "iconv-lite": { 399 | "version": "0.4.24", 400 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", 401 | "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", 402 | "requires": { 403 | "safer-buffer": ">= 2.1.2 < 3" 404 | } 405 | }, 406 | "indexof": { 407 | "version": "0.0.1", 408 | "resolved": "https://registry.npmjs.org/indexof/-/indexof-0.0.1.tgz", 409 | "integrity": "sha1-gtwzbSMrkGIXnQWrMpOmYFn9Q10=" 410 | }, 411 | "inherits": { 412 | "version": "2.0.3", 413 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 414 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 415 | }, 416 | "ipaddr.js": { 417 | "version": "1.9.1", 418 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", 419 | "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==" 420 | }, 421 | "isarray": { 422 | "version": "2.0.1", 423 | "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.1.tgz", 424 | "integrity": "sha1-o32U7ZzaLVmGXJ92/llu4fM4dB4=" 425 | }, 426 | "media-typer": { 427 | "version": "0.3.0", 428 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 429 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 430 | }, 431 | "merge-descriptors": { 432 | "version": "1.0.1", 433 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 434 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 435 | }, 436 | "methods": { 437 | "version": "1.1.2", 438 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 439 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 440 | }, 441 | "mime": { 442 | "version": "1.6.0", 443 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", 444 | "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==" 445 | }, 446 | "mime-db": { 447 | "version": "1.44.0", 448 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", 449 | "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==" 450 | }, 451 | "mime-types": { 452 | "version": "2.1.27", 453 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", 454 | "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", 455 | "requires": { 456 | "mime-db": "1.44.0" 457 | } 458 | }, 459 | "ms": { 460 | "version": "2.1.2", 461 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", 462 | "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" 463 | }, 464 | "negotiator": { 465 | "version": "0.6.2", 466 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", 467 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" 468 | }, 469 | "object-assign": { 470 | "version": "4.1.1", 471 | "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", 472 | "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=" 473 | }, 474 | "object-component": { 475 | "version": "0.0.3", 476 | "resolved": "https://registry.npmjs.org/object-component/-/object-component-0.0.3.tgz", 477 | "integrity": "sha1-8MaapQ78lbhmwYb0AKM3acsvEpE=" 478 | }, 479 | "on-finished": { 480 | "version": "2.3.0", 481 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 482 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 483 | "requires": { 484 | "ee-first": "1.1.1" 485 | } 486 | }, 487 | "parseqs": { 488 | "version": "0.0.5", 489 | "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz", 490 | "integrity": "sha1-1SCKNzjkZ2bikbouoXNoSSGouJ0=", 491 | "requires": { 492 | "better-assert": "~1.0.0" 493 | } 494 | }, 495 | "parseuri": { 496 | "version": "0.0.5", 497 | "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.5.tgz", 498 | "integrity": "sha1-gCBKUNTbt3m/3G6+J3jZDkvOMgo=", 499 | "requires": { 500 | "better-assert": "~1.0.0" 501 | } 502 | }, 503 | "parseurl": { 504 | "version": "1.3.3", 505 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 506 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" 507 | }, 508 | "path-to-regexp": { 509 | "version": "0.1.7", 510 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 511 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 512 | }, 513 | "prettier": { 514 | "version": "2.4.1", 515 | "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.4.1.tgz", 516 | "integrity": "sha512-9fbDAXSBcc6Bs1mZrDYb3XKzDLm4EXXL9sC1LqKP5rZkT6KRr/rf9amVUcODVXgguK/isJz0d0hP72WeaKWsvA==", 517 | "dev": true 518 | }, 519 | "proxy-addr": { 520 | "version": "2.0.6", 521 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz", 522 | "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==", 523 | "requires": { 524 | "forwarded": "~0.1.2", 525 | "ipaddr.js": "1.9.1" 526 | } 527 | }, 528 | "qs": { 529 | "version": "6.7.0", 530 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz", 531 | "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==" 532 | }, 533 | "range-parser": { 534 | "version": "1.2.1", 535 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 536 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" 537 | }, 538 | "raw-body": { 539 | "version": "2.4.0", 540 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", 541 | "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==", 542 | "requires": { 543 | "bytes": "3.1.0", 544 | "http-errors": "1.7.2", 545 | "iconv-lite": "0.4.24", 546 | "unpipe": "1.0.0" 547 | } 548 | }, 549 | "safe-buffer": { 550 | "version": "5.1.2", 551 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", 552 | "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" 553 | }, 554 | "safer-buffer": { 555 | "version": "2.1.2", 556 | "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", 557 | "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" 558 | }, 559 | "send": { 560 | "version": "0.17.1", 561 | "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz", 562 | "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==", 563 | "requires": { 564 | "debug": "2.6.9", 565 | "depd": "~1.1.2", 566 | "destroy": "~1.0.4", 567 | "encodeurl": "~1.0.2", 568 | "escape-html": "~1.0.3", 569 | "etag": "~1.8.1", 570 | "fresh": "0.5.2", 571 | "http-errors": "~1.7.2", 572 | "mime": "1.6.0", 573 | "ms": "2.1.1", 574 | "on-finished": "~2.3.0", 575 | "range-parser": "~1.2.1", 576 | "statuses": "~1.5.0" 577 | }, 578 | "dependencies": { 579 | "debug": { 580 | "version": "2.6.9", 581 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 582 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 583 | "requires": { 584 | "ms": "2.0.0" 585 | }, 586 | "dependencies": { 587 | "ms": { 588 | "version": "2.0.0", 589 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 590 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 591 | } 592 | } 593 | }, 594 | "ms": { 595 | "version": "2.1.1", 596 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz", 597 | "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==" 598 | } 599 | } 600 | }, 601 | "serve-static": { 602 | "version": "1.14.1", 603 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz", 604 | "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==", 605 | "requires": { 606 | "encodeurl": "~1.0.2", 607 | "escape-html": "~1.0.3", 608 | "parseurl": "~1.3.3", 609 | "send": "0.17.1" 610 | } 611 | }, 612 | "setprototypeof": { 613 | "version": "1.1.1", 614 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz", 615 | "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==" 616 | }, 617 | "socket.io": { 618 | "version": "2.3.0", 619 | "resolved": "https://registry.npmjs.org/socket.io/-/socket.io-2.3.0.tgz", 620 | "integrity": "sha512-2A892lrj0GcgR/9Qk81EaY2gYhCBxurV0PfmmESO6p27QPrUK1J3zdns+5QPqvUYK2q657nSj0guoIil9+7eFg==", 621 | "requires": { 622 | "debug": "~4.1.0", 623 | "engine.io": "~3.4.0", 624 | "has-binary2": "~1.0.2", 625 | "socket.io-adapter": "~1.1.0", 626 | "socket.io-client": "2.3.0", 627 | "socket.io-parser": "~3.4.0" 628 | } 629 | }, 630 | "socket.io-adapter": { 631 | "version": "1.1.2", 632 | "resolved": "https://registry.npmjs.org/socket.io-adapter/-/socket.io-adapter-1.1.2.tgz", 633 | "integrity": "sha512-WzZRUj1kUjrTIrUKpZLEzFZ1OLj5FwLlAFQs9kuZJzJi5DKdU7FsWc36SNmA8iDOtwBQyT8FkrriRM8vXLYz8g==" 634 | }, 635 | "socket.io-client": { 636 | "version": "2.3.0", 637 | "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-2.3.0.tgz", 638 | "integrity": "sha512-cEQQf24gET3rfhxZ2jJ5xzAOo/xhZwK+mOqtGRg5IowZsMgwvHwnf/mCRapAAkadhM26y+iydgwsXGObBB5ZdA==", 639 | "requires": { 640 | "backo2": "1.0.2", 641 | "base64-arraybuffer": "0.1.5", 642 | "component-bind": "1.0.0", 643 | "component-emitter": "1.2.1", 644 | "debug": "~4.1.0", 645 | "engine.io-client": "~3.4.0", 646 | "has-binary2": "~1.0.2", 647 | "has-cors": "1.1.0", 648 | "indexof": "0.0.1", 649 | "object-component": "0.0.3", 650 | "parseqs": "0.0.5", 651 | "parseuri": "0.0.5", 652 | "socket.io-parser": "~3.3.0", 653 | "to-array": "0.1.4" 654 | }, 655 | "dependencies": { 656 | "base64-arraybuffer": { 657 | "version": "0.1.5", 658 | "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-0.1.5.tgz", 659 | "integrity": "sha1-c5JncZI7Whl0etZmqlzUv5xunOg=" 660 | }, 661 | "ms": { 662 | "version": "2.0.0", 663 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 664 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 665 | }, 666 | "socket.io-parser": { 667 | "version": "3.3.1", 668 | "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.3.1.tgz", 669 | "integrity": "sha512-1QLvVAe8dTz+mKmZ07Swxt+LAo4Y1ff50rlyoEx00TQmDFVQYPfcqGvIDJLGaBdhdNCecXtyKpD+EgKGcmmbuQ==", 670 | "requires": { 671 | "component-emitter": "~1.3.0", 672 | "debug": "~3.1.0", 673 | "isarray": "2.0.1" 674 | }, 675 | "dependencies": { 676 | "component-emitter": { 677 | "version": "1.3.0", 678 | "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.3.0.tgz", 679 | "integrity": "sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==" 680 | }, 681 | "debug": { 682 | "version": "3.1.0", 683 | "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", 684 | "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", 685 | "requires": { 686 | "ms": "2.0.0" 687 | } 688 | } 689 | } 690 | } 691 | } 692 | }, 693 | "socket.io-parser": { 694 | "version": "3.4.1", 695 | "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-3.4.1.tgz", 696 | "integrity": "sha512-11hMgzL+WCLWf1uFtHSNvliI++tcRUWdoeYuwIl+Axvwy9z2gQM+7nJyN3STj1tLj5JyIUH8/gpDGxzAlDdi0A==", 697 | "requires": { 698 | "component-emitter": "1.2.1", 699 | "debug": "~4.1.0", 700 | "isarray": "2.0.1" 701 | } 702 | }, 703 | "statuses": { 704 | "version": "1.5.0", 705 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 706 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 707 | }, 708 | "to-array": { 709 | "version": "0.1.4", 710 | "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz", 711 | "integrity": "sha1-F+bBH3PdTz10zaek/zI46a2b+JA=" 712 | }, 713 | "toidentifier": { 714 | "version": "1.0.0", 715 | "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz", 716 | "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==" 717 | }, 718 | "type-is": { 719 | "version": "1.6.18", 720 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 721 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 722 | "requires": { 723 | "media-typer": "0.3.0", 724 | "mime-types": "~2.1.24" 725 | } 726 | }, 727 | "unpipe": { 728 | "version": "1.0.0", 729 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 730 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 731 | }, 732 | "utils-merge": { 733 | "version": "1.0.1", 734 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 735 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 736 | }, 737 | "vary": { 738 | "version": "1.1.2", 739 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 740 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 741 | }, 742 | "ws": { 743 | "version": "7.4.0", 744 | "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.0.tgz", 745 | "integrity": "sha512-kyFwXuV/5ymf+IXhS6f0+eAFvydbaBW3zjpT6hUdAh/hbVjTIB5EHBGi0bPoCLSK2wcuz3BrEkB9LrYv1Nm4NQ==" 746 | }, 747 | "xmlhttprequest-ssl": { 748 | "version": "1.5.5", 749 | "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz", 750 | "integrity": "sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=" 751 | }, 752 | "yeast": { 753 | "version": "0.1.2", 754 | "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz", 755 | "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk=" 756 | } 757 | } 758 | } 759 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "socket_server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [], 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "cors": "2.8.5", 14 | "express": "4.17.1", 15 | "http": "0.0.1-security", 16 | "socket.io": "2.3.0" 17 | }, 18 | "devDependencies": { 19 | "prettier": "^2.4.1" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /web/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "babel-preset" 4 | ], 5 | "plugins": [ 6 | "transform-react-jsx-source", 7 | [ 8 | "module-resolver", 9 | { 10 | "alias": { 11 | "~/*": "./src" 12 | }, 13 | "cwd": "babelrc" 14 | } 15 | ] 16 | ] 17 | } -------------------------------------------------------------------------------- /web/.dockerignore: -------------------------------------------------------------------------------- 1 | .git 2 | .gitignore 3 | README.md 4 | node_modules -------------------------------------------------------------------------------- /web/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /web/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:alpine 2 | 3 | RUN mkdir -p /usr/src/app 4 | WORKDIR /usr/src/app 5 | 6 | ENV PATH /usr/src/app/node_modules/.bin:$PATH 7 | 8 | COPY package*.json ./ 9 | RUN npm install 10 | 11 | COPY . . 12 | 13 | RUN npm run build 14 | RUN npm install -g serve -y 15 | 16 | EXPOSE 5000 17 | CMD [ "npx", "serve", "-s", "build" ] 18 | -------------------------------------------------------------------------------- /web/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `yarn start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `yarn test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `yarn build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `yarn eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /web/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "web", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "4.11.0", 7 | "@testing-library/jest-dom": "^4.2.4", 8 | "@testing-library/react": "^9.3.2", 9 | "@testing-library/user-event": "^7.1.2", 10 | "@types/jest": "^24.0.0", 11 | "@types/material-ui": "0.21.8", 12 | "@types/node": "^12.0.0", 13 | "@types/react": "^16.9.0", 14 | "@types/react-custom-scrollbars": "4.0.7", 15 | "@types/react-dom": "^16.9.0", 16 | "@types/react-redux": "7.1.9", 17 | "@types/react-router-dom": "^5.1.6", 18 | "@types/redux": "3.6.0", 19 | "@types/simple-peer": "9.6.1", 20 | "@types/socket.io-client": "1.4.34", 21 | "@types/styled-components": "5.1.3", 22 | "@types/uuid": "8.3.0", 23 | "axios": "0.21.0", 24 | "jwt-decode": "3.1.2", 25 | "moment": "2.29.0", 26 | "react": "^16.13.1", 27 | "react-custom-scrollbars": "4.2.1", 28 | "react-dom": "^16.13.1", 29 | "react-icons": "3.11.0", 30 | "react-redux": "7.2.1", 31 | "react-router-dom": "^5.2.0", 32 | "react-scripts": "3.4.3", 33 | "redux": "4.0.5", 34 | "simple-peer": "9.6.2", 35 | "socket.io-client": "2.3.0", 36 | "styled-components": "5.2.0", 37 | "typescript": "~3.7.2", 38 | "uuid": "8.3.1" 39 | }, 40 | "scripts": { 41 | "start": "react-scripts start", 42 | "build": "react-scripts build", 43 | "test": "react-scripts test", 44 | "eject": "react-scripts eject" 45 | }, 46 | "eslintConfig": { 47 | "extends": "react-app" 48 | }, 49 | "browserslist": { 50 | "production": [ 51 | ">0.2%", 52 | "not dead", 53 | "not op_mini all" 54 | ], 55 | "development": [ 56 | "last 1 chrome version", 57 | "last 1 firefox version", 58 | "last 1 safari version" 59 | ] 60 | }, 61 | "devDependencies": { 62 | "@babel/preset-react": "7.10.4", 63 | "babel-plugin-module-resolver": "4.0.0" 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /web/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/millo-L/Typescript-ReactJS-WebRTC-1-1-P2P/4e6e411b35d1523ae119a05b8c54018b37a2a55a/web/public/favicon.ico -------------------------------------------------------------------------------- /web/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /web/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/millo-L/Typescript-ReactJS-WebRTC-1-1-P2P/4e6e411b35d1523ae119a05b8c54018b37a2a55a/web/public/logo192.png -------------------------------------------------------------------------------- /web/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/millo-L/Typescript-ReactJS-WebRTC-1-1-P2P/4e6e411b35d1523ae119a05b8c54018b37a2a55a/web/public/logo512.png -------------------------------------------------------------------------------- /web/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /web/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /web/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /web/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /web/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef } from "react"; 2 | import io from "socket.io-client"; 3 | 4 | const pc_config = { 5 | iceServers: [ 6 | // { 7 | // urls: 'stun:[STUN_IP]:[PORT]', 8 | // 'credentials': '[YOR CREDENTIALS]', 9 | // 'username': '[USERNAME]' 10 | // }, 11 | { 12 | urls: "stun:stun.l.google.com:19302", 13 | }, 14 | ], 15 | }; 16 | const SOCKET_SERVER_URL = "http://localhost:8080"; 17 | 18 | const App = () => { 19 | const socketRef = useRef(); 20 | const pcRef = useRef(); 21 | const localVideoRef = useRef(null); 22 | const remoteVideoRef = useRef(null); 23 | 24 | const setVideoTracks = async () => { 25 | try { 26 | const stream = await navigator.mediaDevices.getUserMedia({ 27 | video: true, 28 | audio: true, 29 | }); 30 | if (localVideoRef.current) localVideoRef.current.srcObject = stream; 31 | if (!(pcRef.current && socketRef.current)) return; 32 | stream.getTracks().forEach((track) => { 33 | if (!pcRef.current) return; 34 | pcRef.current.addTrack(track, stream); 35 | }); 36 | pcRef.current.onicecandidate = (e) => { 37 | if (e.candidate) { 38 | if (!socketRef.current) return; 39 | console.log("onicecandidate"); 40 | socketRef.current.emit("candidate", e.candidate); 41 | } 42 | }; 43 | pcRef.current.oniceconnectionstatechange = (e) => { 44 | console.log(e); 45 | }; 46 | pcRef.current.ontrack = (ev) => { 47 | console.log("add remotetrack success"); 48 | if (remoteVideoRef.current) { 49 | remoteVideoRef.current.srcObject = ev.streams[0]; 50 | } 51 | }; 52 | socketRef.current.emit("join_room", { 53 | room: "1234", 54 | }); 55 | } catch (e) { 56 | console.error(e); 57 | } 58 | }; 59 | 60 | const createOffer = async () => { 61 | console.log("create offer"); 62 | if (!(pcRef.current && socketRef.current)) return; 63 | try { 64 | const sdp = await pcRef.current.createOffer({ 65 | offerToReceiveAudio: true, 66 | offerToReceiveVideo: true, 67 | }); 68 | await pcRef.current.setLocalDescription(new RTCSessionDescription(sdp)); 69 | socketRef.current.emit("offer", sdp); 70 | } catch (e) { 71 | console.error(e); 72 | } 73 | }; 74 | 75 | const createAnswer = async (sdp: RTCSessionDescription) => { 76 | if (!(pcRef.current && socketRef.current)) return; 77 | try { 78 | await pcRef.current.setRemoteDescription(new RTCSessionDescription(sdp)); 79 | console.log("answer set remote description success"); 80 | const mySdp = await pcRef.current.createAnswer({ 81 | offerToReceiveVideo: true, 82 | offerToReceiveAudio: true, 83 | }); 84 | console.log("create answer"); 85 | await pcRef.current.setLocalDescription(new RTCSessionDescription(mySdp)); 86 | socketRef.current.emit("answer", mySdp); 87 | } catch (e) { 88 | console.error(e); 89 | } 90 | }; 91 | 92 | useEffect(() => { 93 | socketRef.current = io.connect(SOCKET_SERVER_URL); 94 | pcRef.current = new RTCPeerConnection(pc_config); 95 | 96 | socketRef.current.on("all_users", (allUsers: Array<{ id: string }>) => { 97 | if (allUsers.length > 0) { 98 | createOffer(); 99 | } 100 | }); 101 | 102 | socketRef.current.on("getOffer", (sdp: RTCSessionDescription) => { 103 | //console.log(sdp); 104 | console.log("get offer"); 105 | createAnswer(sdp); 106 | }); 107 | 108 | socketRef.current.on("getAnswer", (sdp: RTCSessionDescription) => { 109 | console.log("get answer"); 110 | if (!pcRef.current) return; 111 | pcRef.current.setRemoteDescription(new RTCSessionDescription(sdp)); 112 | //console.log(sdp); 113 | }); 114 | 115 | socketRef.current.on( 116 | "getCandidate", 117 | async (candidate: RTCIceCandidateInit) => { 118 | if (!pcRef.current) return; 119 | await pcRef.current.addIceCandidate(new RTCIceCandidate(candidate)); 120 | console.log("candidate add success"); 121 | } 122 | ); 123 | 124 | setVideoTracks(); 125 | 126 | return () => { 127 | if (socketRef.current) { 128 | socketRef.current.disconnect(); 129 | } 130 | if (pcRef.current) { 131 | pcRef.current.close(); 132 | } 133 | }; 134 | }, []); 135 | 136 | return ( 137 |
138 |
161 | ); 162 | }; 163 | 164 | export default App; 165 | -------------------------------------------------------------------------------- /web/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /web/src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render( 7 | 8 | 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | -------------------------------------------------------------------------------- /web/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /web/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /web/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /web/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "noEmit": true, 20 | "jsx": "react", 21 | "baseUrl": "./src" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------