如何快速搭建一个web socket服务

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天，点击查看活动详情。

问题

操作

安装包

npm i express socket.io

注意，这里的express并不是必须的，也就是为了快速搭建服务器。

核心代码

在项目根目录下创建 app.js，内容如下

const express = require("express");
const app = express();
const http = require("http").createServer(app);
const io = require("socket.io")(http, {cors: true});

io.on("connection", socket => {  // 客户端链接成功
    console.log('~connection~')
    // 主动消息给客户端，这里的message是约定的频道名字，也可以取其他的
    io.emit("message", '服务器就绪...')
    socket.on("message", msg => {  
        // 监听的频道必须和客户端监听的频道相同，等待消息
        io.emit("message", "我是服务器：" + msg);  // 向所有客户端发送信息
    });

    io.on("disconnect", _ => {  // 客户端断开链接
       
    });

});

http.listen(3009, _ => {
    console.log("server running on 3009");
});

说明：

代码中的message是约定的频道名字，也可以取其他的
{cors: true}表示支持跨域

启动服务器

node app.js

客户端代码

文件名为index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.socket.io/4.4.0/socket.io.min.js"></script>
</head>
<body>
    
    <button id="btn">点击发消息</button>
    <script>
        const socket = io('http://localhost:3009');
        socket.on('connect', () => {
            console.log('看到这里，表示和服务器连接上了')
        
            // 监听来自服务器的消息
            // message是和服务器约定好的消息频道名字
            socket.on('message',(msg) => {
                console.log('来自服务器',  msg)
            })
        })
        document.getElementById('btn').addEventListener('click',() => {
            // 主动给服务器发送消息
            // message是和服务器约定好的消息频道名字
            socket.emit('message', '我是客户端')
        })
    </script>
</body>
</html>

运行效果

双击打开index.html文件，（或者使用live-server之类的服务器也可以），可以在network下的ws选项卡中看到：此时，在控制台的输出是：

可以看到，浏览器端能主动接收消息了。

点击页面上的按钮之后，消息发给服务器，服务器回传的结果如下：