Node.js、套接字、io 和 HTTPS

Question

我正在制作一个白板应用程序：

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

io.on('connect', function(socket) {
  socket.on('join', function(data) {
    socket.join(data.room);
    console.log(data.room);
  });

  socket.on('drawing', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("senddraw", data);
  });

  socket.on('writetext', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("senddraw", data);
  });

  socket.on('action', function(data) {
    console.log(data);
    io.sockets.in(data.room).emit("action", data);
  });

});

http.listen(8080, function() {
  console.log('listening on localhost:8080');
});

如果我在我的服务器上运行这个节点脚本，我可以通过我的网页的本地主机副本进行连接。 但是，我无法从服务器上托管的副本进行连接，因为它是通过 HTTPS 提供的。 我收到错误：

polling-xhr.js:264 混合内容：位于 ***** 的页面已通过 HTTPS 加载，但请求了不安全的 XMLHttpRequest 端点“http://” 。 . .* :8080/socket.io/?EIO=3&transport=polling&t=Lu2NoGL'。 此请求已被阻止； 内容必须通过 HTTPS 提供。

如何在不禁用服务器上的 ssl 的情况下解决此问题？

客户端具有等效于：

  //var socket = io.connect("http://localhost:8080");
  var socket = io.connect("http://**.***.***.**:8080");

  socket.on("connect", function(data) {
    socket.emit("join", {room : "@roomid"});
  });

关于绘图事件：

socket.emit("drawing", {x0 : x0, y0 : y0, x1 : x1, y1: y1, current : current, room : "@roomid"});

由以下人员挑选：

socket.on("drawing", function(data) {do blah});

Answer 1

您需要通过连接到/而不是http://...*:8080来更改网页 javascript 中的socket.io client代码：

var socket = io.connect('/');

Answer 2

我在使用 socket.io 的通知实现中解决了这个问题

我的 socket.io 服务器（节点）在 8001 端口上

我的应用程序使用 ssl 并通过 https 提供服务

大致步骤：

1. using reverse proxy in my virtualhost apache configurations to point all socket.io requests to my node server at 8001
2. sending requests from socket.io client to host = wss://domain.com:443/
3. using same version i.e. 4.0.0 of socket.io client and socket.io server

我使用的反向代理配置：

        RewriteEngine On
        RewriteCond %{REQUEST_URI}  ^/socket.io            [NC]
        RewriteCond %{QUERY_STRING} transport=websocket    [NC]
        RewriteRule /(.*)           ws://localhost:8001/$1 [P,L]

        ProxyPass /socket.io http://localhost:8001/socket.io connectiontimeout=600 timeout=600
        ProxyPassReverse /socket.io http://localhost:8001/socket.io

使用本指南： https : //www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/

socket.io 客户端实现：

function createSocket(host) {
        return io(host);
    }
    function init() {
        var host = "wss://mydomain.com:443/";
        try {
            socket = createSocket(host);
            console.log('3');

            socket.on("connect", () => {
                console.log('In Connect');
            });

socket.io 服务器实现

const app = require("express")();
const server = require("http").createServer(app);

const io = require("socket.io")(server, {
cors: {
origin: '*',
}, 'pingTimeout': 180000, 'pingInterval': 25000,
});

io.on("connection", (socket) => {
  console.log("Connected!");
  socket.on("message", data => {
              console.log("in message with data: "+data.topic);
              pubClient.publish('notification', data);
            });
});

server.listen(8001);