WebRTC 从零学习笔记④-简易聊天室

目录

实现效果

客户端核心代码

服务端核心代码

---

框架分析：

• enter：新人进入（蓝色字体显示）
• message：普通聊天信息（黑色字体显示）
• leave：有人离开（红色字体显示）

服务器在收到某个客户端的信息（message+enter+leave），然后将其广播给所有的客户端（包括发送者)。

实现效果

客户端效果：

服务端信息：

客户端核心代码

        //新建一个websocket
        const webSocket = new WebSocket('http://127.0.0.1:9999')

        // 打开websocket链接
        webSocket.onopen = function (){
            console.log('已连接上服务器------')
            document.getElementById('submitBtn').onclick = function (){
                const txt = document.getElementById('sendMsg').value
                if(txt){
                    // 向服务器发送数据
                    webSocket.send(txt)
                }
            }
        }

        // 关闭连接
        webSocket.onclose=function(){
            console.log('webSocket close')
        }

        // 接收服务器数据
        webSocket.onmessage = function(e){
            const mes = JSON.parse(e.data) //JSON格式
            console.log(2231,mes)
            showMessage(mes.data,mes.type)
        }

服务端核心代码

const ws = require('nodejs-websocket')
const port=9999
let user=0


// 创建一个链接
const server = ws.createServer(function (conn){
    user++;
    conn.nickname='user'+user//动态增加成员变量
    conn.fd='user'+user
    let mes ={}
    mes.type='enter'
    mes.data=conn.nickname+'进来啦'
    broadcast(JSON.stringify(mes));//广播
    console.log('创建一个新的链接------')//创建新的链接会返回一个新conn对象

    // 向客户端推送消息
    conn.on('text',function(str){
        console.log('回复'+str)
        mes.type='message'
        mes.data=conn.nickname+'说：  '+str
        broadcast(JSON.stringify(mes))
    })

    // 监听关闭操作
    conn.on('close',function(code,reason){
        console.log('关闭连接')
        mes.type='leave'
        mes.data=conn.nickname+'离开了'
        broadcast(JSON.stringify(mes))
    })
    // 错误处理
    conn.on('error',function(err){
        console.log('监听到错误')
        console.log(err)
    })
}).listen(port,()=>{
    console.log(`ws start at http://127.0.0.1:${port}`);
})

// 广播
function broadcast(str){
    server.connections.forEach(function (connection){
        connection.sendText(str)
    })
}