Node wss Websocket 適用於桌面，不適用於移動設備

Question

我正在嘗試通過節點的 WebSocket (ws) 庫將手機的方向數據發送到本地服務器。 在我的研究中，似乎只能使用 ssl 訪問方向數據，因此這僅在我有 wss/https 時才有效。 我有一個使用自簽名證書的節點服務器，它在桌面瀏覽器上運行良好，但是當我在我的 iphone 上運行它時，我最終在嘗試連接時收到一條錯誤消息。 下面的代碼，非常感謝任何建議/替代方案！ （我更像是一個圖形/多媒體程序員，所以我可能會丟失某些網絡/服務器術語）

客戶端.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);
}

服務器.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);
    }
}

索引.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 適用於桌面，不適用於移動設備

問題描述

1 個解決方案

解決方案1
0 已采納 2020-09-10 14:40:52

Node wss Websocket 適用於桌面，不適用於移動設備

問題描述

1 個解決方案

解決方案1 0 已采納 2020-09-10 14:40:52

解決方案1
0 已采納 2020-09-10 14:40:52