rewrite with wss

cert.pem

@@ -0,0 +1,19 @@
+-----BEGIN CERTIFICATE-----
+MIIDIzCCAgsCFGL2RUvaMPh1oocuvA2JvX8zFCx0MA0GCSqGSIb3DQEBCwUAME0x
+CzAJBgNVBAYTAlJVMRMwEQYDVQQIDApTb21lLVN0YXRlMRAwDgYDVQQKDAdmb3hh
+cm15MRcwFQYDVQQDDA5wYi5mb3hhcm15Lm9yZzAgFw0yMzA4MDIwOTUwMjBaGA8y
+MDUwMTIxNzA5NTAyMFowTTELMAkGA1UEBhMCUlUxEzARBgNVBAgMClNvbWUtU3Rh
+dGUxEDAOBgNVBAoMB2ZveGFybXkxFzAVBgNVBAMMDnBiLmZveGFybXkub3JnMIIB
+IjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxiIKOr4RqIwK+2dpazzTirDp
+333FdmTTxvTs5R6jaTNEL0MfZNKi0rmxUZEBSiOTJJ/5tw8APW86JmtajvujHKFb
+MdFXUPHew9a9QqWX3k+yu5xc2x4Xz+xJTkHLVkrcAWtI1U6RdZBap04DUNVkqm5g
+30BtSSbGdrcO1LT6cjvKIcw6xQNhmobWZx72/c9+4RFPsdF6FlTsBblL7s/swTmg
+l5srA7jbOywLM8U2o8iVRh3sVXokJ0XKlRKfkpWEZRvuWr0j0g79evc8X3YLr7qk
+1GJViO4IJwRDqcvlSlBMVS3rdegqc+ijap4sd/AGsCMWUoSQiDrnKWEfIvWCTwID
+AQABMA0GCSqGSIb3DQEBCwUAA4IBAQB4aJl7OH8brVKlywY3wfLASFpeodM11+vH
+3Y1FVx03vDuS055FRCMbwq/MAswXkflQsxyx6gatpbiWoxYJpSzuUyttwMZZ0oHf
+FawDJGvYBQHYDsRgneXv4s2NrRtNQpi/+Fg9Qti5vqZzJ9y6wUKUJwFIN+ksM6p6
+C4gtjokWHpC19qRwN1Q+5Kfs1jEYNNnZoFFcJ+10dHPbGOw7CGhZyjUTKGEOajx2
+Oo8kkGDQJlm8meH7cqS5PAU9exZbCTI5q8zBoTM2aZTIdTNIZE40nqG6BGLejRyP
+kPUmQWW7k6w4/RsDPRiTuG5Um2dZrc4ZK4Qv+ewF8+c8xmWyRDKb
+-----END CERTIFICATE-----

csr.pem

@@ -0,0 +1,16 @@
+-----BEGIN CERTIFICATE REQUEST-----
+MIICkjCCAXoCAQAwTTELMAkGA1UEBhMCUlUxEzARBgNVBAgMClNvbWUtU3RhdGUx
+EDAOBgNVBAoMB2ZveGFybXkxFzAVBgNVBAMMDnBiLmZveGFybXkub3JnMIIBIjAN
+BgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAxiIKOr4RqIwK+2dpazzTirDp333F
+dmTTxvTs5R6jaTNEL0MfZNKi0rmxUZEBSiOTJJ/5tw8APW86JmtajvujHKFbMdFX
+UPHew9a9QqWX3k+yu5xc2x4Xz+xJTkHLVkrcAWtI1U6RdZBap04DUNVkqm5g30Bt
+SSbGdrcO1LT6cjvKIcw6xQNhmobWZx72/c9+4RFPsdF6FlTsBblL7s/swTmgl5sr
+A7jbOywLM8U2o8iVRh3sVXokJ0XKlRKfkpWEZRvuWr0j0g79evc8X3YLr7qk1GJV
+iO4IJwRDqcvlSlBMVS3rdegqc+ijap4sd/AGsCMWUoSQiDrnKWEfIvWCTwIDAQAB
+oAAwDQYJKoZIhvcNAQELBQADggEBAG0SrTigUcC1bOdM7BT3qbsACBqouTBzx17m
+z5LH2zmiMyR6G5i84Ud8knX8OOOExa+OM/YXT8qVs82bDS5Qb8VuRlg14275y0cU
+D7AQNFOvChzFjDk9388WjO8I7zjfbCr2hxvgFLkxpAyDH5zPuvmUBhxxb0CVQOF4
+ao4O36xxB9H9dAxuB5lY90p8Tp3ueKRj4oFrHa67LhzBOYb0rhdTsHVKxvqLnoIV
+24o+uQMQQsV3wYGKUIDRYW7pizhZcM8hTa7eIPIKYtBzW3cBXBlotfbYww7SCFJ0
+6Dyp1boewHkg08oo3b/VgwmYEVUddGz8C+iinZhY1QPD3p9v8PY=
+-----END CERTIFICATE REQUEST-----

html/logic.js

@@ -1,6 +1,6 @@
 var serverAddress = document.getElementById("server-address").value;
 var serverPort = document.getElementById("server-port").value
-var socket = new WebSocket(`ws://${serverAddress}:${serverPort}`);
+var socket//new WebSocket(`wss://${serverAddress}:${serverPort}`);
 
 var canvas = document.getElementById("board");
 var colorInput = document.getElementById("color");
@@ -26,11 +26,12 @@ function drawTimer() {
 }
 
 function connect() {
-    socket.close();
+//    socket.close();
     serverAddress = document.getElementById("server-address").value;
     serverPort = document.getElementById("server-port").value
     console.log(`Connecting ${serverAddress}:${serverPort}`)
-    socket = new WebSocket(`ws://${serverAddress}:${serverPort}`)
+    socket = new WebSocket(`wss://${serverAddress}:${serverPort}`)
+    // socket = new WebSocket(`wss://127.0.0.1:8080`)
     timer.textContent="Board is loading, please wait";
     socket.addEventListener("open", (event) => {
         socket.send("{\"code\":0}");

key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQDGIgo6vhGojAr7
+Z2lrPNOKsOnffcV2ZNPG9OzlHqNpM0QvQx9k0qLSubFRkQFKI5Mkn/m3DwA9bzom
+a1qO+6McoVsx0VdQ8d7D1r1CpZfeT7K7nFzbHhfP7ElOQctWStwBa0jVTpF1kFqn
+TgNQ1WSqbmDfQG1JJsZ2tw7UtPpyO8ohzDrFA2GahtZnHvb9z37hEU+x0XoWVOwF
+uUvuz+zBOaCXmysDuNs7LAszxTajyJVGHexVeiQnRcqVEp+SlYRlG+5avSPSDv16
+9zxfdguvuqTUYlWI7ggnBEOpy+VKUExVLet16Cpz6KNqnix38AawIxZShJCIOucp
+YR8i9YJPAgMBAAECggEAIzrIQNus/iAwj7U6jGPbZWzBmQifBMc21MiWGsNQ4RLJ
+i/HOcjn106xK+CrlZM5gioGbgE49h67wUwaBqqzZuuyB76C+etkW+BGFw4T4NQJM
+0IkkBZ4bM9Ba1HxkcGqNJf9yiuMWgCXzyI3ZjxTyek94EBo/lGM9pLw1+eJYKdlh
+nZ/wHz48i4w73N82T232Mjum2nembRuKK+f9q9xboa5Z8SZQ+aYZfPccjnlWqxBh
+r42f13HUmzmkU3hcxvOSwNdUXO1flN2ivhE+Ese+kKGpRsMHA/ORBhj7bItfW9e2
+vOkPIZIbchkEG4Fx0yMDgE7I1B+UBDYBvKRIKCRwoQKBgQDoMLpazTtCzErhLozf
+0oMUatIbrh9ai8HBlunmMMQSCDbUmGguJ7HKna+20I3KJlMZgL+vrsavh/NY1Ju4
+wUF3vhhcphBz0oSfPiOQS7WWw+VlV8EgJy+VtCkjvh9FQcdRWURg8ZLnjKkwbL5Q
+ESnftGg60xpSAE64OPm7Z/E98QKBgQDac0P4BP+6PPX0+hzAk6pRXpcNvhaWga2n
+W8KC2qB2Ci9sYOjoKnQuDToJ95Kcvwi49HZDCuKOGs1TFMlpBMVkUefiXmjhmRif
+lCb+9tK6HTEDSJn2ulSaWdsGfcq5Zv+ZGamGEMBFHh2A0gj0+LcGHHqTBn2u8ui8
+RU/jOheEPwKBgQC5YbZYKwYGlh+u3EDDr0rSsVrhmMsVuwHOs9Q54nOZRg+o+6oq
+N60e7XlOiAK9BI5SjVX+SZf+q5fiM5XFFB9WIGNJDZmTL+CNV8qDOb9ZCT0NBdx+
+9GpspzQ1gmVrIVKnI5ORpy64SrkGnbvxJ1L8dgjF9qhMEkzHj03sj9evsQKBgCr5
+tCxt51VfOs/4CIIGSuJ5JmRoug7f8ibTkX+mvRybwlqi8g8CkxqgNYPSdcBqgK/K
+QB3OXWWxdiVbGIiVjLPAvUq2YhHHyaVTQxyzuB8vMP5BYTC91XkMJl+vjZtN3Qjk
+mIosb3bphspaB7MR3wfPwHl+NGmflhO72wyL2CaHAoGAYAWC1yK90C/E79qA+I2A
+HH4sqOB5NeoOvzJXfLhsDhKwajmpH/h5hfDSJ4XH7WoL0rcVkzZKoEWMeO3mfrUS
+kWNIA368Gki9dfyJgQx2ewODcZiLWI6kzQ1XbeCUsyI2ALfm3CTft6pg5lifCwty
+ItDNyjbaR8CSIFcsKwaebdI=
+-----END PRIVATE KEY-----

package.json

@@ -24,6 +24,7 @@
     "jimp": "^0.22.10",
     "nodemon": "^3.0.1",
     "pug": "^3.0.2",
-    "ws": "^8.13.0"
+    "ws": "^8.13.0",
+    "wss": "^3.3.4"
   }
 }

settings.json

@@ -1,9 +1,8 @@
 {
-    "appPort": 7865,
     "httpPort": 8080,
     "boardWidth": 1920,
     "boardHeight": 1080,
-    "serverAddress": "foxarmy.org",
+    "serverAddress": "127.0.0.1",
-    "saveFile": "../board.png",
+    "saveFile": "./board.png",
     "timeBetweenPixels": 5
 }

src/index.js

@@ -1,22 +1,27 @@
-const WebSocket = require('wss');
+const WebSocket = require('ws');
-const express = require('express');
-const http = express();
 const path = require('path');
 const pug = require('pug');
 const Jimp = require('jimp');
 const fs = require('fs');
+const https = require('https');
+const http = require('http');
+const express = require('express');
+const app = express();
 
-http.use(express.static(path.join(__dirname, '../html')));
+app.use(express.static(path.join(__dirname, '../html')));
-http.set('view engine', 'pug');
+app.set('view engine', 'pug');
 
 const config = require("../settings.json");
 const httpPort = config.httpPort;
-const appPort = config.appPort;
 const serverAddress = config.serverAddress;
 const saveFile = config.saveFile;
 const boardWidth = config.boardWidth;
 const boardHeight = config.boardHeight;
 const timeBetweenPixels = config.timeBetweenPixels;
+const credentails = {
+    key: fs.readFileSync("key.pem"),
+    cert: fs.readFileSync("cert.pem")
+}
 
 var toQuit = false;
 
@@ -25,12 +30,11 @@ var board = new Array(boardWidth * boardHeight * 4);
 if (!fs.existsSync(saveFile)) {
     console.log("No save file found, creating blank board.");
     board.fill(255);
-    let image = new Jimp(boardWidth, boardHeight, save);
 } else {
     console.log("Save file found, loading")
     let image = Jimp.read(`./${saveFile}`, (err, image) => {
-        for (let x = 0; x < boardWidth; x ++) {
+        for (let x = 0; x < boardWidth; x++) {
-            for (let y = 0; y < boardHeight; y ++) {
+            for (let y = 0; y < boardHeight; y++) {
                 pixelNumber = evaulatePixelNumber(x * 4, y * 4);
                 let pixel = Jimp.intToRGBA(image.getPixelColor(x, y))
                 board[pixelNumber + 0] = pixel.r
@@ -44,24 +48,33 @@ if (!fs.existsSync(saveFile)) {
 
 }
 
-const ws = new WebSocket.Server({
+const httpsServer = https
-  port: appPort,
+    .createServer(
+        credentails,
+        app
+    )
+    .listen(httpPort, "0.0.0.0", () => {
+        console.log("test))0");
+        // const ws = new WebSocket(`wss://127.0.0.1:${httpPort}`, {
+        //     rejectUnauthorized: false
+        //   });
+
+        //   ws.on('error', console.error);
+        //   ws.on('message', (msg) => {
+        //     console.log("Client got a message: ", msg.toString())
+        //   })
+        //   ws.on('open', function open() {
+        //     ws.send('All glory to WebSockets!');
+        //   });
+    })
+const server = new WebSocket.Server({
+    server: httpsServer,
     host: "0.0.0.0",
-  handleProtocols: true,
-  server: httpsServer
-//   AddressInfo.family = 4;
-//   server: true
 });
 
-// var ws = require('ws').Server;
-
-// const server = new ws({})
-console.log(server)
-
-// const server = new WebSocket.Server({ http });
-
 let clients = [];
 let lastPixelTimestamp = [];
+
 const evaulatePixelNumber = (x, y) => {
     let pixelNumber;
     if (y > 0)
@@ -70,21 +83,20 @@ const evaulatePixelNumber = (x, y) => {
         pixelNumber = x;
     return pixelNumber;
 }
-
+server.on('connection', (client) => {
-server.on('connection', function(client) {
-    console.log(`New client has connected, assigning id ${clients.length} to it.`)
     client.id = clients.length;
     clients.push(client);
+    console.log(`New client has connected, assigning id ${clients.length} to it.`)
 
-  client.on('message', function(msg) {
+    client.on('message', function (msg) {
         let packet, content, code;
         try {
             packet = JSON.parse(msg.toString());
             content = packet.content;
             code = packet.code;
-    } catch (e) {console.log(e)}
+        } catch (e) { console.log(e) }
         let response = {};
-    switch(code) {
+        switch (code) {
             case 0:
                 response.code = 0;
                 response.content = board;
@@ -99,17 +111,16 @@ server.on('connection', function(client) {
                 let pixelNumber = evaulatePixelNumber(contentJson.x * 4, contentJson.y * 4);
                 if (contentJson.x < 0 || contentJson.y < 0) client.send("{\"code\":-1}");
 
+                let unixTime = Math.floor(new Date().getTime() / 1000);
+                if (lastPixelTimestamp[client.id] == undefined || unixTime - lastPixelTimestamp[client.id] > timeBetweenPixels - 1) {
+                    lastPixelTimestamp[client.id] = unixTime;
+                    for (let i = 0; i < clients.length; i++) {
+                        response.pixelOwner = i == client.id ? true : false;
+                        clients[i].send(Buffer.from(JSON.stringify(response)));
                         board[pixelNumber + 0] = contentJson.r;
                         board[pixelNumber + 1] = contentJson.g;
                         board[pixelNumber + 2] = contentJson.b;
                         board[pixelNumber + 3] = 255;
-
-            let unixTime = Math.floor(new Date().getTime() / 1000);
-            if (lastPixelTimestamp[client.id] == undefined || unixTime - lastPixelTimestamp[client.id] > timeBetweenPixels - 1) {
-                lastPixelTimestamp[client.id] = unixTime;
-                for (let i = 0; i < clients.length; i ++) {
-                    response.pixelOwner = i == client.id? true : false;
-                    clients[i].send(Buffer.from(JSON.stringify(response)));
                     }
                     // clients.forEach(c => c.send(Buffer.from(JSON.stringify(response))));
                     // client.send("{\"code\":2}")
@@ -123,25 +134,30 @@ server.on('connection', function(client) {
         }
     });
 
-  client.on('close', function() {
+    client.on('close', function () {
         clients = clients.filter(s => s !== client);
     });
 });
 
-http.get('/', (req, res) => {
-    res.render('index.pug', {root: __dirname, server: serverAddress, port:appPort});
-})
 
-http.listen(httpPort, "0.0.0.0", () => {
+
-    console.log(`Starting pixelbattle http server on port ${httpPort}`);
+
+
+app.get('/', (req, res) => {
+    // res.send("Hello")
+    res.render('index.pug', { root: __dirname, server: serverAddress, port: httpPort });
 })
+app.use(function (err, req, res, next) {
+    if (err) console.log(err);
+    next();
+});
 
 const save = (err, image) => {
     if (err) throw err;
     console.log()
-        for (let x = 0; x < boardWidth; x ++) {
+    for (let x = 0; x < boardWidth; x++) {
-            for (let y = 0; y < boardHeight; y ++) {
+        for (let y = 0; y < boardHeight; y++) {
-                let pixelNumber = evaulatePixelNumber(x * 4 , y * 4);
+            let pixelNumber = evaulatePixelNumber(x * 4, y * 4);
             image.setPixelColor(
                 Jimp.rgbaToInt(
                     Number(board[pixelNumber + 0]),
@@ -177,4 +193,3 @@ process.on('SIGINT', () => {
     toQuit = true;
     let image = new Jimp(boardWidth, boardHeight, save);
 });
-