Socket.IO中的跨域连接

是否可以跨域使用Socket.IO？如果是，如何？这种可能性在网上被提及，但任何地方都没有给出代码示例。

引用套接字.io常见问题解答：

Socket.IO支持跨域连接吗

当然，在每一个浏览器上！

至于它是如何做到的：Native WebSockets在设计上是跨域的，socket.io为跨域闪存通信提供闪存策略文件，XHR2可以使用CORS，最后你可以始终使用JSONP。

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

是否可以以跨域方式使用Socket.Io是的，当然。

如果是，如何

选项1：仅强制使用Websockets

默认情况下，websocket是跨域的。如果您强制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);

就是这样，有问题吗？无法在不支持websocket的浏览器上工作（对于客户端）。有了这个，你几乎扼杀了Socket.io的魔力，因为它从长轮询开始，后来升级到websocket（如果客户端支持的话）

如果你100%确定你的所有客户端都会使用符合HTML5的浏览器访问，那么你就可以开始了。

选项2：允许服务器端的CORS，让Socket.io处理是使用websocket还是长轮询

对于这种情况，您只需要调整服务器端的设置。客户端连接一如既往。

服务器端

//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();
 });

就是这样。希望它能帮助其他人。

创建客户端套接字时只需插入远程域名：

const socket = new WebSocket('ws://example.com/echo');

MDN 的一些文档

但是，您应该确保您的服务器接受websocket（配置和头）。

旧版本：

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

Socket.io支持跨域连接，但请记住，cookie不会传递到服务器。你必须选择其中之一：

（1）想出一个替代的标识方案（自定义令牌或javascript cookie——请记住，这不应该是实际的会话id，除非你想让自己面临会话劫持的风险）

或者（2）首先向服务器发送一个好的老式HTTP JSONP请求以获得cookie。然后，它将通过套接字连接握手进行传输。

通过以下方式创建服务器：

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')});

在原点数组中指定有效的原点

简单安全！

在主文件中，将其放在io.on（"连接"）之前，添加行：

io.set('origins', 'yoursite.com:*');
io.on('connection', function (socket) {

是的。我已经实现了跨域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>

这应该很好。

从v4开始，根据文档：

由于Socket.IOv3，您需要显式启用跨源资源共享（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"
  }
});

CCD_ 3可以是一个接受多个原点的数组。

其他选项包括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"]}
});

相关内容

最新更新

热门标签：