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

相关推荐
人工智能训练师7 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny077 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy8 小时前
css的基本知识
前端·css
昔人'8 小时前
css `lh`单位
前端·css
Nan_Shu_61410 小时前
Web前端面试题(2)
前端
知识分享小能手10 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队11 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
AD钙奶-lalala11 小时前
SpringBoot实现WebSocket服务端
spring boot·后端·websocket
孩子 你要相信光11 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52012 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js