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

相关推荐
逐·風1 分钟前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫30 分钟前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦1 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子2 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享2 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf4 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨4 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL4 小时前
npm入门教程1:npm简介
前端·npm·node.js
小白白一枚1115 小时前
css实现div被图片撑开
前端·css