attempt to use https

traque-back/.gitignore

@@ -1,3 +1,7 @@
+#https dev certificates
+csr.pem
+key.pem
+server.crt
 # Logs
 logs
 *.log

traque-back/Makefile

@@ -0,0 +1,8 @@
+#Make a self signed certificate for development
+keys: key.pem server.crt
+
+key.pem csr.pem:
+	openssl req -newkey rsa:2048 -new -nodes -keyout key.pem -out csr.pem
+
+server.crt: key.pem csr.pem
+	openssl x509 -req -days 365 -in csr.pem -signkey key.pem -out server.crt

traque-back/index.js

@@ -1,19 +1,26 @@
-import { createServer } from "http";
+import { createServer } from "https";
 import { Server } from "socket.io";
 import Game from "./game.js";
 import { config } from "dotenv";
+import { readFileSync } from "fs";
 //extract admin password from .env file
 config();
 const ADMIN_PASSWORD = process.env.ADMIN_PASSWORD;
 const HOST = process.env.HOST;
 const PORT = process.env.PORT;
 
-const httpServer = createServer();
-//Password that socket clients will have to send to be able to send admin commands
+const httpsServer = createServer({
+  key: readFileSync(process.env.SSL_KEY, 'utf-8'),
+  cert: readFileSync(process.env.SSL_CERT, 'utf-8')
+});
+
+httpsServer.listen(PORT, HOST, () => {
+  console.log(`Server running`);
+});
 
 
 //set cors to allow all origins
-const io = new Server(httpServer, {
+const io = new Server(httpsServer, {
   cors: {
     origin: "*",
     methods: ["GET", "POST"]
@@ -195,7 +202,3 @@ io.of("player").on("connection", (socket) => {
     });
   });
 });
-
-httpServer.listen(PORT, HOST, () => {
-  console.log(`Server running`);
-});

traque-front/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

traque-front/components/team/actionDrawer.jsx

@@ -33,7 +33,7 @@ export default function ActionDrawer() {
                 </div>
                 <div className="mt-1 mb-auto">
                     <div className="h-20 flex flex-row">
-                        <TextInput inputmode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
+                        <TextInput inputMode="numeric" placeholder="Enemy code" onClick={(i) => { console.log(i) }} />
                         <GreenButton onClick={sendCurrentPosition}>Capture target</GreenButton>
                     </div>
                 </div>

traque-front/components/team/loginForm.jsx

@@ -13,7 +13,7 @@ export default function LoginForm({ onSubmit, title, placeholder, buttonText}) {
     return (
         <form className="bg-white shadow-md max-w mx-auto p-5 mx-10 flex flex-col space-y-4" onSubmit={handleSubmit}>
             <h1 className="text-2xl font-bold text-center text-gray-700">{title}</h1>
-            <TextInput inputmode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
+            <TextInput inputMode="numeric" placeholder={placeholder} value={value} onChange={(e) => setValue(e.target.value)} name="team-id"/>
             <Button type="submit">{buttonText}</Button>
         </form>
     )

traque-front/context/socketContext.jsx

@@ -3,9 +3,11 @@ import { createContext, useContext, useMemo } from "react";
 
 const { io } = require("socket.io-client");
 
-const SOCKET_URL = 'http://' + process.env.NEXT_PUBLIC_SOCKET_HOST + ':' + process.env.NEXT_PUBLIC_SOCKET_PORT;
+const SOCKET_URL = 'wss://' + process.env.NEXT_PUBLIC_SOCKET_HOST + ':' + process.env.NEXT_PUBLIC_SOCKET_PORT;
 const USER_SOCKET_URL = SOCKET_URL + "/player";
 const ADMIN_SOCKET_URL = SOCKET_URL + "/admin";
+console.log(USER_SOCKET_URL);
+console.log(ADMIN_SOCKET_URL);
 
 export const teamSocket = io(USER_SOCKET_URL);
 export const adminSocket = io(ADMIN_SOCKET_URL);

traque-front/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "author": "Quentin Roussel",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"