在使用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為實際的前端和後端域名和端口號。