Невозможно подключиться к маршрутизатору WAMP на стороне клиента моего приложения

Question

Я создаю веб-интерфейс для устройства IoT, который изменит настройки устройства. Технологический стек, который я использую, выглядит следующим образом: - 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}`));

Answer 1

Я не уверен, почему мое сообщение об ошибке говорит мне, что конечная точка по 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:// URL, который небезопасен. Если главная веб-страница загружается по протоколу https, браузеры принудительно загружают другие ресурсы, используемые страницей, по защищенным ссылкам.

Чтобы это исправить, возможны следующие варианты:

1. использование wss://xxx надежно подключиться.
2. Измените страницу, чтобы она загружалась небезопасно http (не рекомендуется).
3. Измените способ подключения к ресурсу, чтобы прокси-соединение с ресурсом осуществлялось через защищенную ссылку на ваш сервер.