[SOLVED] Node wss Websocket works on Desktop, not on Mobile

Node wss Websocket works on Desktop, not on Mobile

I'm trying to get my phone's orientation data to send to a local server via node's WebSocket (ws) library. In my research, it seems that orientation data is only accessible using ssl, so this will only work if I have a wss/https. I've got a node server working with a self-signed certificate, and it works fine on a desktop browser, but when I run it on my iphone, I end up getting an error message when it tries to connect. Code below, any suggestions/alternatives are greatly appreciated! (I'm more of a graphics/multimedia programmer, so certain web/server terms could be lost on me)

client.js:

let socket = new WebSocket("wss://192.168.0.10:3000");

socket.onopen = function(e) {
  alert("[open] Connection established ");
  alert("Sending to server");
  socket.send("Hello");
};

socket.onmessage = function(event) {
  alert(`[message] Data received from server: ${event.data}`);
};

socket.onclose = function(event) {
  if (event.wasClean) {
    alert(`[close] Connection closed cleanly, code=${event.code} reason=${event.reason}`);
  } else {
    // e.g. server process killed or network down
    // event.code is usually 1006 in this case
    alert('[close] Connection died');
  }
};

socket.onerror = function(error) {
  alert(`[error] ${error.message}`);
};

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coords = "X coords: " + x + ", Y coords: " + y;
  console.log(coords);
  socket.send(coords);
}

server.js:

var express = require('express');
var app = express();

const https = require('https');
const fs = require('fs');
// var cors = require('cors');

const options = {
    key: fs.readFileSync('key.pem'),
    cert: fs.readFileSync('cert.pem')
};
const WebSocket = require('ws');


// var server = app.listen(3000);
const server = https.createServer(options, app);
const wss = new WebSocket.Server({ server });

wss.on('connection', function connection(ws) {
  ws.on('message', function message(msg) {
    console.log("WS connect "+msg);
  });
});


app.use(express.static('public'));

console.log('socket server is running');

server.listen(3000, function () {
  console.log('Example app listening on port 3000! Go to https://localhost:3000/')
  console.log('')

       const ws = new WebSocket(`wss://localhost:${server.address().port}`, {
    rejectUnauthorized: false
  });

  ws.on('open', function open() {
    ws.send('All glory to WebSockets! '+server.address().port);
  });
})

function newConnection(socket) {
    console.log(socket.id);
    socket.on('mouse', mouseMsg);

    function mouseMsg(data){
        socket.broadcast.emit('mouse', data);

        console.log(data);
    }
}

index.html

<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style type="text/css">
            .garden {
  position: relative;
  width : 200px;
  height: 200px;
  border: 5px solid #CCC;
  border-radius: 10px;
}

.ball {
  position: absolute;
  top   : 90px;
  left  : 90px;
  width : 20px;
  height: 20px;
  background: green;
  border-radius: 100%;
}

  </style>
        
  <title>Detecting device orientation - Orientation_example - code sample</title>
  <script src="sketch.js"></script>

</head>
<body>
  <main>

  <div onclick="showCoords(event)" class="garden">
  <div class="ball"></div>
  </div>

  <pre class="output"></pre>
  <script>
  var ball   = document.querySelector('.ball');
  var garden = document.querySelector('.garden');
  var output = document.querySelector('.output');

  var maxX = garden.clientWidth  - ball.clientWidth;
  var maxY = garden.clientHeight - ball.clientHeight;

  function handleOrientation(event) {
    var x = event.alpha;  // In degree in the range [-180,180]
    var y = event.beta; // In degree in the range [-90,90]

    output.innerHTML  = "beta : " + y + "\n";
    // output.innerHTML += "gamma: " + y + "\n";

    // Because we don't want to have the device upside down
    // We constrain the x value to the range [-90,90]
    if (x >  90) { x =  90};
    if (x < -90) { x = -90};

    // To make computation easier we shift the range of 
    // x and y to [0,180]
    x += 90;
    y += 90;

    // 10 is half the size of the ball
    // It center the positioning point to the center of the ball
    ball.style.top  = (maxY*y/180 - 10) + "px";
    ball.style.left = (maxX*x/180 - 10) + "px";
  }

window.addEventListener('deviceorientation', handleOrientation);

 </script>


  </main>
</body>
</html>

Solution

You should be able to do this with https://ngrok.com/. Once you install ngrok (you will need a free account). Run your server and client. Point ngrok to your client local port i.e. 8000 ~/ngrok http 8000 copy the returned https url i.e. https://xxxxxxxx.ngrok.io on your device.