前端 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为实际的前端和后端域名和端口号。

相关推荐
学习前端的小z3 分钟前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
彭世瑜27 分钟前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund40428 分钟前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish28 分钟前
Token刷新机制
前端·javascript·vue.js·typescript·vue
小五Five29 分钟前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序29 分钟前
vue3 封装request请求
java·前端·typescript·vue
临枫54130 分钟前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
前端每日三省31 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_98532 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
渊兮兮33 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画