ws模块

构建流程

客户端(前端)

  • 通过new浏览器的内置对象WebSocket来构建一个WebSocket连接器,并指定要连接的端口号
// 创建websocket连接器并指定链接端口(固定形式)
var ws = new WebSocket("ws://localhost:8080")
  • 生成的ws实例一般提供6个回调函数:
    • onclose: 服务器宕机就走这个回调函数
    • onerror: 连接失败就走这个回调函数
    • onmessage: 服务端每一次推送消息过来就走这个回调函数
    • onopen: 客户端与服务器连接成功就会走这个回调函数
    • send: 客户端向服务器发送消息
    • close: 关闭连接
// ws模块提供的5个回调函数
// 1. onclose(服务器宕机)
ws.onclose = () =>{
    console.log('服务器宕机了!');
}
// 2. onerror(客户端与服务器连接失败)
ws.onerror = ()=>{
    console.log('连接失败!');
}
// 3. onmessage(每一次服务器返回消息)
ws.onmessage = (msgObj)=>{
    console.log(msgObj);//返回的消息对象
}
// 4. onopen(客户端与服务器连接成功)
ws.onopen = ()=>{
    console.log('连接成功!');
    // 5. send(客户端向服务端发送信息)
	ws.send('你好! 服务端!')
}

后端(服务器)

  • 安装ws模块
npm i ws
  • 引入和创建WebSocket服务器
// 引入ws模块中的 WebSocket
const WebSocket = require('ws');
//创建WebSocket的服务器(也就是WebSocketServer)
const WebSocketServer = WebSocket.WebSocketServer

// 创建 WebSocketServer (websocket服务器)
const wss = new WebSocketServer({ port: 8080 });
  • 设置websocket服务器监听(wss表示websocket服务器 , ws表示当前每一个链接这台服务器的客户端)
// 设置websocket服务器监听(wss表示websocket服务器 , ws表示当前每一个链接这台服务器的客户端)
wss.on('connection', function connection(ws,req) {//监听连接事件
    //第一个参数为连接这个服务器的客户端,第二个参数为req,可以让我们将一些参数带过去,如token
  ws.on('message', function message(data) {//客户端监听信息事件
    console.log('收到了来自客户端的消息:', data.toString());//将接受过来的消息转化为字符串信息
});
})
  • 群聊功能:wss中有一个属性:clients这个属性里面存放着前所有链接这台websocket服务器的客户端
// 简易的群聊功能(clients里面存放着当前所有链接这台websocket服务器的客户端)
// 对所有链接这台websocket服务器的客户端进行一个遍历
wss.clients.forEach(function each(client) {
    // 判断当前所有的客户端是否成功链接
    if (client.readyState === WebSocket.OPEN) {
        /*
            将每一个客户端发过来的信息进行二进制的转换并重新转发回给每一个客户端
            也就是说: 每一个客户端发的消息所有的客户端都能看见
        */ 
        client.send(data, { binary: false });//第二个参数为判断是否为二进制
    }
});

我写了一个小demo来实现群聊功能

  • 前端页面动态的创建li标签根据消息的接收动态的填入到存在的ul标签中
<body>
    <h1>聊天室(客户端)</h1>
    <div class="chatArea">
        <ul id="chatArea">
            <li>你好</li>
        </ul>
    </div>
    <button id="submit">发送</button>
    <input type="text" id="message">

    <script>
        // 创建websocket连接器并指定链接端口(固定形式)
        var ws = new WebSocket("ws://localhost:8080")

        // ws模块提供的4个回调函数
        // 1. onclose(服务器宕机)
        ws.onclose = () =>{
            console.log('服务器宕机了!');
        }
        // 2. onerror(客户端与服务器连接失败)
        ws.onerror = ()=>{
            console.log('连接失败!');
        }
        // 3. onmessage(每一次服务器返回消息)
        ws.onmessage = (msgObj)=>{
            console.log(msgObj.data);//返回的消息对象
            //接收到或者自己发送的消息自动创建li标签填入到ul中
            var Othernew = document.createElement('li')//创建dom节点
            Othernew.innerText = msgObj.data//将获取回来的消息赋值给li标签
            document.querySelector('#chatArea').appendChild(Othernew)//将li标签添加到聊天区域中
        }
        // 4. onopen(客户端与服务器连接成功)
        ws.onopen = ()=>{
            console.log('连接成功!');
            // 5. send(客户端向服务端发送信息)
            // ws.send('你好! 服务端!')
        }

        // 获取dom元素
        var message = document.querySelector('#message')//消息的输入
        var submit = document.querySelector('#submit')//提交按钮

        // 注册发送事件
        submit.onclick = ()=>{
            // 判断不能发送空消息
            if(!message.value){
                alert('消息不能为空!')
            }
            //将输入口昂的内容通过ws.send发送到服务器
            ws.send(message.value)//发送消息
        }
    </script>
</body>
  • 后端页面,这里做消息的转发
// websocket编程 - ws模块
// 首先引入express框架
const express = require('express')

// 创建服务器
const app = express()
// 使用express.static中间件托管静态资源
app.use(express.static('./public'))


// http响应
app.get('/',(req , res)=>{
    res.send({ok:1})
})

// 启动服务器
app.listen(3000, ()=>{
    console.log('服务器已启动! 3000端口正在监听...');
})

// websocket响应
// 引入ws模块中的 WebSocket
const WebSocket = require('ws');
const WebSocketServer = WebSocket.WebSocketServer//创建WebSocket的服务器(也就是WebSocketServer)

// 创建 WebSocketServer (websocket服务器)
const wss = new WebSocketServer({ port: 8080 });

// 设置websocket服务器监听(wss表示websocket服务器 , ws表示当前每一个链接这台服务器的客户端)
wss.on('connection', function connection(ws) {//监听连接事件
  ws.on('message', function message(data) {//客户端监听信息事件
    console.log('收到了来自客户端的消息:', data.toString());//将接受过来的消息转化为字符串信息
    // 简易的群聊功能(clients里面存放着当前所有链接这台websocket服务器的客户端)
    // 对所有链接这台websocket服务器的客户端进行一个遍历
    wss.clients.forEach(function each(client) {
        // 判断当前所有的客户端是否成功链接
        if (client.readyState === WebSocket.OPEN) {
            /*
                将每一个客户端发过来的信息进行二进制的转换并重新转发回给每一个客户端
                也就是说: 每一个客户端发的消息所有的客户端都能看见(群聊功能)
            */ 
            client.send(data, { binary: false });//第二个参数为判断是否为二进制
        }
    });
  });

  ws.send('欢迎来到聊天室!');
});

结果展示:

image