首页 > 解决方案 > 无法连接到我的应用程序客户端的 WAMP 路由器

问题描述

我正在为 IoT 设备构建一个 Web 界面,它将更改设备的设置。我使用的技术栈如下: - 前端客户端的 React.JS - 服务器的 Node.js - AutobahnJS 库与 WAMP 通信以进行 RPC 调用、订阅/发布事件。

在我的客户端,我正在尝试使用以下代码连接到带有高速公路的 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 混合内容:“https://{ipaddress}”处的页面是通过 HTTPS 加载的,但尝试连接到不安全的 WebSocket 端点“ws://{ip}:{port}/”。此请求已被阻止;此端点必须在 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}`));

标签: node.jsexpresswebsocketautobahnwamp-protocol

解决方案


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

您收到的错误消息是告诉您该网页是通过 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://不安全的网址。如果主网页是通过 https 加载的,那么浏览器会强制该页面使用的其他资源也必须通过安全链接加载。

为了解决这个问题,可能的选择是:

  1. 用于wss://xxx安全连接。
  2. 更改页面,使其加载不安全http(不推荐)。
  3. 更改连接到资源的方式,以便通过到服务器的安全链接代理到资源的连接。

推荐阅读