微信小程序中如何使用WebSocket实现长连接(含完整源码)

2、相关文章

3、运行效果

4、为什么要用 WebSocket

export class Server {
 
    init(path: string) {
        /** Port that server listen on */
        this.port = process.env.PORT;
 
        /** HTTP Server instance for both express and socket io */
        this.http = http.createServer();
 
        /** Socket io instance */
        this.io = SocketIO(this.http, { path });
 
        /** Handle incomming connection */
        this.io.on("connection", socket => {
            // handle connection
        });
    }
 
    start() {
        this.http.listen(this.port);
        console.log(`---- server started. listen : ${this.port} ----`);
    }
}
 
const server = new Server();
server.init("/applet/ws/socket.io");
server.start();

const socket = new WxSocketIO();
socket.on('hi', packet => console.log('server say hi: ' + packet.message));
socket.emit('hello', { from: 'techird' });

5、通信协议设计

6、服务器逻辑

• 收到用户请求加入房间（join），就寻找还没满的房间：
    - 找到房间，则加入；
    - 没找到房间，创建新房间。
• 有用户加入的房间检查是否已满，如果已满，则：
    - 给房间里每个用户发送开始游戏的信号（start）；
    - 启动计时器，计时器结束后进行游戏结算。
• 游戏结算：
    - 两两之间 PK，赢方分数加一，输方减一，最终得每个玩家基本得分 x；
    - 对于每个玩家，如果分数 x 大于 0，则视为胜利，连胜次数加一，否则连胜次数归零；
    - 本局得分为分数 x 乘以连胜次数。
• 发送本局游戏结果给房间里的每位玩家。
  

6、微信小程序端的实现

7、部署和运行

7.1整体架构

7.2准备域名和证书

• 只允许和在 MP 中配置好的域名进行通信，如果还没有域名，需要注册一个；
• 网络请求必须走 HTTPS 协议，所以你还需要为你的域名申请一个证书；
• 域名注册好之后，可以登录微信公众平台配置通信域名了。
  

7.3云主机和镜像部署

7.4配置 HTTPS

7.5域名解析

7.6启动 WebSocket 服务

7.7启动微信小程序