无法连接到我的应用程序客户端的 WAMP 路由器

Question

我正在构建一个 IoT 设备的 Web 界面，它将更改设备的设置。我使用的技术栈如下： - React.JS 用于前端客户端 - Node.js 对于服务器 - AutobahnJS 库与 WAMP 通信以进行 RPC 调用，Subscribe/Publish 事件。

在我的客户端，我尝试使用以下代码连接到我的带高速公路的 WAMP 路由器

//Define our WAMP connection via autobahn
var url = 'ws://{ip}:{port}/';
var realm = 'com.example.embedded.api';
var connection = new autobahn.Connection({url: url, realm: realm});
console.log(connection);

connection.onopen = function (session) {
  console.log("connected to WAMP router");
  app.session = session;
  console.log("connection to app success");
};

connection.onclose = function (reason, details) {
  console.log("WAMP connection closed", reason, details);
  app.session = null;
}

connection.open();

此连接失败。当我在控制台注销问题时，错误消息是

websocket.js:167 Mixed Content: The page at 'https://{ipaddress}' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://{ip}:{port}/'. This request has been blocked; this endpoint must be available over WSS.

我不确定为什么我的错误消息告诉我端点通过 WSS。我能够连接到我的代码服务器上的那个端点。

//point to react build
app.use(express.static(path.join(__dirname, './client/build')));

//create a server
const server = https.createServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}, app)
.listen(port, function () {
  console.log(`Example app listening on port ${port}! Go to https://localhost`)
});

//open up a websocket
const wss = new WebSocket.Server({ server });
console.log("wss", wss);

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });
  ws.send('something');
});

server.listen(port, () => console.log(`Listening on port ${port}`));

Answer 1

I'm not sure why my error message is telling me that the endpoint over WSS. I'm able to connect to that endpoint point on my code server.

您收到的错误消息告诉您该网页是通过 https 加载的。这意味着页面连接或加载的任何其他资源也需要是安全的。但是，您的 webSocket 连接代码并不安全。它使用 ws://xxx 这是不安全的。此代码：

//Define our WAMP connection via autobahn
var url = 'ws://{ip}:{port}/';
var realm = 'com.example.embedded.api';
var connection = new autobahn.Connection({url: url, realm: realm});

正在使用不安全的 ws:// url。如果主网页是通过 https 加载的，那么浏览器会强制要求该页面使用的其他资源也必须通过安全 links 加载。

要解决此问题，可能的选择是：

使用 wss://xxx 安全连接。
更改页面，使其在 http 上不安全地加载（不推荐）。
更改连接到资源的方式，以便通过安全 link 将资源连接代理到您的服务器。

无法连接到我的应用程序客户端的 WAMP 路由器

Unable to connect to WAMP router on the client side of my application

node.js

express

websocket

autobahn

wamp-protocol