動態

詳情 返回 返回

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

Add a new 評論

Some HTML is okay.