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>