前端 socket.io 跨域

在使用Socket.io进行前端跨域通信时,可以通过设置Socket.io的cors选项来允许跨域请求。

以下是一个简单的例子,展示了如何在Node.js的服务器代码中配置Socket.io以允许跨域连接:

复制代码
const express = require('express');
const http = require('http');
const socketIO = require('socket.io');
 
// 创建一个Express应用和HTTP服务器
const app = express();
const server = http.createServer(app);
 
// 创建Socket.io服务器并绑定到HTTP服务器上
const io = socketIO(server, {
  cors: {
    origin: "http://your-frontend-domain.com", // 允许跨域的前端域名
    methods: ["GET", "POST"], // 允许的跨域请求方法
    transports: ['websocket', 'polling'], // 允许的跨域通信传输方式
    credentials: true // 允许cookies等认证信息一起跨域传递
  }
});
 
// 监听客户端连接
io.on('connection', (socket) => {
  console.log('A client has connected');
 
  // 定义处理消息的回调函数
  socket.on('message', (data) => {
    console.log('Received message:', data);
    // 发送消息回客户端
    socket.emit('message', 'Hello, client!');
  });
 
  // 定义处理disconnect的回调函数
  socket.on('disconnect', () => {
    console.log('A client has disconnected');
  });
});
 
// 启动服务器
server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

前端代码使用Socket.io客户端连接到服务器:

复制代码
const socket = io('http://your-backend-domain.com:3000', {
  transports: ['websocket', 'polling'],
  withCredentials: true
});
 
socket.on('connect', () => {
  console.log('Connected to the server');
});
 
socket.on('message', (data) => {
  console.log('Received message:', data);
});
 
// 发送消息到服务器
socket.emit('message', 'Hello, server!');

确保替换your-frontend-domain.com和your-backend-domain.com:3000为实际的前端和后端域名和端口号。

相关推荐
Mintopia2 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia3 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
独立开阀者_FwtCoder19 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
Frankabcdefgh25 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展
2401_8784545327 分钟前
thymeleaf的使用和小结
前端·javascript·学习
brzhang35 分钟前
宝藏发现:Sim Studio,一款让AI工作流搭建变简单的开源利器
前端·后端·github
2301_7994049135 分钟前
AJAX 介绍
前端·ajax·axios
拖孩41 分钟前
【Nova UI】十三、打造组件库之按钮组件(中):样式雕琢全攻略
前端·javascript·vue.js
好_快1 小时前
Lodash源码阅读-sortedUniqBy
前端·javascript·源码阅读
小流苏生1 小时前
这只是一罐过期了七年的红牛……
前端·人工智能·程序员