Node wss Websocket 在桌面上工作，而不是在移动设备上
Posted
技术标签:
【中文标题】Node wss Websocket 在桌面上工作，而不是在移动设备上【英文标题】：Node wss Websocket works on Desktop, not on Mobile 【发布时间】：2020-09-09 21:48:59 【问题描述】：我正在尝试通过节点的 WebSocket (ws) 库将手机的方向数据发送到本地服务器。在我的研究中，似乎只能使用 ssl 访问方向数据，所以这只有在我有 wss/https 时才有效。我有一个使用自签名证书的节点服务器，它在桌面浏览器上运行良好，但是当我在我的 iphone 上运行它时，当它尝试连接时我最终收到一条错误消息。下面的代码，非常感谢任何建议/替代方案！ （我更像是一个图形/多媒体程序员，所以某些网络/服务器术语可能会丢失）
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>
【问题讨论】：
请附上您收到的错误信息。此外，请确保自签名 ssl 证书在您的移动设备上是受信任的。 【参考方案1】：您应该可以使用https://ngrok.com/ 执行此操作。安装 ngrok 后（您将需要一个免费帐户）。运行您的服务器和客户端。将 ngrok 指向您的客户端本地端口，即 8000 ~/ngrok http 8000 在您的设备上复制返回的 https url 即 https://xxxxxxxx.ngrok.io。
【讨论】：
以上是关于Node wss Websocket 在桌面上工作，而不是在移动设备上的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 node.js 使 Websocket 服务器安全
WebSocket/Node.js 帮助：无法建立到 wss://domain:8080 的连接 - 不是特定于浏览器的
Websockets 在 Chrome (wss) 中不工作：“握手被取消”