如何解决节点wss Websocket在台式机上工作，而不在移动设备上工作
我正在尝试获取手机的方向数据，以通过节点的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>
解决方法
您应该可以使用https://ngrok.com/执行此操作。一旦安装了ngrok（您将需要一个免费帐户）。运行您的服务器和客户端。将ngrok指向客户端本地端口，即8000 ~/ngrok http 8000复制返回的https url，即https://xxxxxxxx.ngrok.io在设备上。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。