websocket Socket.IO中的跨域连接

hlswsv35  于 2022-11-11  发布在  其他
关注(0)|答案(8)|浏览(430)

是否可以跨域使用Socket.IO?如果可以,如何使用?网络上提到了这种可能性,但没有给出任何代码示例。

2jcobegt

2jcobegt1#

引用socket.io常见问题解答:

Socket.IO是否支持跨域连接?

绝对的,在每个浏览器上!
至于它是如何做到的:原生WebSockets是跨域设计的,socket.io为跨域闪存通信提供闪存策略文件,XHR 2可以使用CORS,最后,您可以始终使用JSONP。

xxhby3vn

xxhby3vn2#

套接字.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的浏览器(客户端)上无法工作。有了这个,你几乎扼杀了www.example.com的魔力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();
 });

就这样希望能对其他人有所帮助。

sd2nnvve

sd2nnvve3#

在创建客户端套接字时,只需插入您的远程域名:

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

关于MDN的一些文档
但是,您应该确保您的服务器接受websockets(配置和头)。
旧版本:

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

uubf1zoe4#

Socket.io 支持跨域连接,但请记住,您的cookie不会被传递到服务器。您必须:
(1)提出一个替代的标识方案(一个自定义令牌或一个javascript cookie--记住这不应该是实际的会话id,除非您想让自己处于会话劫持的风险中)
或者(2)首先向服务器发送一个好的老式HTTPJSONP请求以获取cookie。然后它将通过套接字连接握手进行传输。

bvk5enib

bvk5enib5#

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

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

cu6pst1q

cu6pst1q6#

方便又安全!
在主文件中,将其放在io.on('connection')之前,添加以下行:

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

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

yvt65v4c7#

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

应该没问题。

f3temu5u

f3temu5u8#

从v4开始,根据the docs
从Socket.IO v3开始,你需要显式地启用Cross-Origin Resource Sharing(CORS)。
您可以在传递给new Server()的配置对象中使用cors键。请参阅basic example from the above docs page

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

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

origin可以是接受多个来源的数组。
其他选项包括allowRequestallowedHeaderswithCredentialsextraHeaderscors封装中的其他选项,该封装最终可处理CORS接头。
我还测试了与this answer稍有不同的语法,this answer在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"]}
});

相关问题