Node wss Websocket 适用于桌面，不适用于移动设备

Question

我正在尝试让我的 phone 的方向数据通过节点的 WebSocket (ws) 库发送到本地服务器。在我的研究中，方向数据似乎只能使用 ssl 访问，所以这只有在我有 wss/https 时才有效。我有一个使用自签名证书的节点服务器，它在桌面浏览器上运行良好，但是当我运行它在我的 iphone 上时，我最终收到一条错误消息尝试连接。下面的代码，任何 suggestions/alternatives 都非常感谢！（我更像是一个 graphics/multimedia 程序员，所以某些 web/server 术语对我来说可能会丢失）

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>

Answer 1

您应该可以使用 https://ngrok.com/ 来做到这一点。安装 ngrok 后（您将需要一个免费帐户）。运行你的服务器和客户端。将 ngrok 指向您的客户端本地端口，即 8000 ~/ngrok http 8000 复制返回的 https url，即您设备上的 https://xxxxxxxx.ngrok.io。

Node wss Websocket 适用于桌面，不适用于移动设备

Node wss Websocket works on Desktop, not on Mobile

https

wss

websocket

node.js

device-orientation