WampServer（端口81）搭配Socket.io的端口使用问题

嘿，刚接触WebSocket和多人游戏开发的话，这个问题其实很常见，我来给你掰扯清楚～

首先得明确：Socket.io是基于Node.js运行的，和你的WampServer（跑Apache/Nginx的81端口）是两个独立的服务，所以端口选择分两种常见场景：

1. 最省心的独立端口方案 #

既然Wamp已经占了81端口，你给Socket.io的Node.js服务器选一个未被占用的其他端口就行，比如业内常用的3000、8080，或者你自定义的8000都可以。

举个实际的代码例子，你的Socket.io服务器大概是这样写：

const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const server = http.createServer(app);
// 关键：允许来自Wamp 81端口的跨域请求
const io = new Server(server, {
  cors: {
    origin: "http://localhost:81",
    methods: ["GET", "POST"]
  }
});

io.on('connection', (socket) => {
  console.log('有玩家连接啦');
  // 这里写你的多人游戏逻辑，比如同步位置、发送消息
});

// 监听3000端口，启动服务器
server.listen(3000, () => {
  console.log('Socket.io服务器跑在3000端口啦');
});

然后你的Phaser代码里，连接Socket.io的时候就写：

const socket = io('http://localhost:3000');

2. 进阶的共享81端口方案（反向代理） #

如果你不想用额外端口，想让用户只访问81端口就能同时用网页和Socket.io，可以给Wamp里的Apache配置反向代理。

找到Apache的虚拟主机配置文件（一般在Wamp的bin/apache/apacheX.X.X/conf/extra/httpd-vhosts.conf），添加这段配置：

ProxyPass /socket.io http://localhost:3000/socket.io
ProxyPassReverse /socket.io http://localhost:3000/socket.io

这样，当你的Phaser代码请求http://localhost:81/socket.io时，Apache会自动把请求转发到跑在3000端口的Socket.io服务器。这时候你在Phaser里连接的地址就简化成：

const socket = io('http://localhost:81');

几个要注意的小细节 #

• 选端口前先检查有没有被占用：Windows下打开命令提示符，输入netstat -ano | findstr :你想选的端口号，比如netstat -ano | findstr :3000，如果没结果就说明端口可用。
• 跨域一定要处理：如果Socket.io和Wamp用不同端口，必须在Socket.io配置里设置cors允许http://localhost:81的请求，不然浏览器会直接拦截连接，这是新手常踩的坑！

内容的提问来源于stack exchange，提问作者JuZDePeche