"Socket.IO 中的跨域連接"

Question

是否可以跨域方式使用 Socket.IO？ 如果是這樣，怎么做？ 網絡上提到了這種可能性，但在任何地方都沒有給出代碼示例。

Answer 1

引用socket.io FAQ ：

Socket.IO是否支持跨域連接？

絕對是，在每個瀏覽器上！

至於它是如何做到的：Native WebSockets是跨域設計的，socket.io提供用於跨域flash通信的flash策略文件，XHR2可以使用CORS，最后你總是可以使用JSONP。

Answer 2

** Socket.IO版本 - > 1.3.7 **

是否可以以跨域方式使用Socket.Io？ 是的，一點沒錯。

如果是這樣，怎么樣？

選項1：僅強制使用Websockets

默認情況下，websockets是跨域的。 如果強制Socket.io僅將其用作連接客戶端和服務器的方法，那么你就可以了。

服務器端

//HTTP Server 
var server = require('http').createServer(app).listen(8888);
var io = require('socket.io').listen(server);

//Allow Cross Domain Requests
io.set('transports', [ 'websocket' ]);

客戶端

var connectionOptions =  {
            "force new connection" : true,
            "reconnectionAttempts": "Infinity", //avoid having user reconnect manually in order to prevent dead clients after a server restart
            "timeout" : 10000, //before connect_error and connect_timeout are emitted.
            "transports" : ["websocket"]
        };

 var socket = io("ur-node-server-domain", connectionOptions);

而已。 問題？ 不適用於不支持websockets的瀏覽器（適用於客戶端）。 有了這個你幾乎殺死了Socket.io的魔力，因為它逐漸開始長時間輪詢以后升級到websockets（如果客戶端支持它。）

如果您100％確定所有客戶都可以使用符合HTML5標准的瀏覽器訪問，那么您很高興。

選項2：在服務器端允許CORS，讓Socket.io處理是否使用websockets或長輪詢。

對於這種情況，您只需要調整服務器端設置。 客戶端連接與以前一樣。

服務器端

//HTTP Server 
var express=require('express');
//Express instance
var app = express();

//ENABLE CORS
app.all('/', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
 });

而已。 希望它可以幫助其他人。

Answer 3

只需在創建客戶端套接字時插入遠程域名：

var socket = io.connect('http://example.com:8080');

Answer 4

Socket.io支持跨域連接，但請記住，您的cookie不會傳遞給服務器。 你必須要么：

（1）提出備用識別方案（自定義令牌或javascript cookie） - 請記住，這不應該是實際的會話ID，除非你想讓自己面臨會話劫持的風險）

或者（2）首先向服務器發送一個好的舊式HTTP JSONP請求以獲取cookie。 然后它將通過套接字連接握手傳輸。

Answer 5

簡單安全！

在主文件中將它放在io.on（'connection'）之前，添加以下行：

io.set('origins', 'yoursite.com:*');

io.on('connection', function (socket) {

Answer 6

是的，它確實。 我已經實現了跨域socket.io來測試它是否有效。

<script src="http://your-nodejs-domain.com:3000/public/js/jquery.js"></script>
  <script src="http://your-nodejs-domain.com:3000/socket.io/socket.io.js"></script>
  <script>

      var socket = io.connect('http://your-nodejs-domain:3000');
      $(document).ready(function(){

          socket.on('test message', function(msg){
               console.log("Got the message: " + msg);
          });
      });

  </script>

這應該工作正常。

Answer 7

通過io創建您的服務器，如下所示：

const server = require('http').createServer();

const io = require('socket.io')(server, {
    origins:["127.0.0.1:8000"],
    path: '/',
    serveClient: false,
    // below are engine.IO options
    pingInterval: 20000,
    pingTimeout: 5000,
    cookie: false
});

io.on('connection', function(socket){
    console.log("here new user welcom")
});


server.listen(3000,function(){
    console.log('listening on *:3000')});

在originins數組中指定有效的原點

Answer 8

從 v4 開始，根據文檔：

從 Socket.IO v3 開始，您需要顯式啟用跨域資源共享(CORS)。

您可以在傳遞給new Server()的配置對象中使用cors鍵。 請參閱上述文檔頁面中的這個基本示例：

import { createServer } from "http";
import { Server } from "socket.io";

const httpServer = createServer();
const io = new Server(httpServer, {
  cors: {
    origin: "https://example.com"
  }
});

origin可以是一個接受多個來源的數組。

其他選項包括allowRequest 、 allowedHeaders 、 withCredentials 、 extraHeaders和cors包中的其他選項，它們最終在后台處理 CORS 標頭。

我還測試了與這個答案稍有不同的語法，這對我來說適用於 4.4.1：

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io")(server, {
  cors: {origin: ["https://glitch.me", "https://cdpn.io"]}
});