Websocket实现广播

我们使用server.connection实现广播。

一、简单的广播实现

Github链接地址

//每一个连上服务器的用户都有一个conn对象
const server = ws.createServer(conn => {
    console.log('新的连接')
    count++
    
    conn.userName = `用户${count}`   //模板字符串
    console.log(conn.userName)
    // 告诉所有用户，有人加入聊天室
    broadcast(`${conn.userName}进入了聊天室`)

    //接收到浏览器的数据
    conn.on('text',data =>{
        //当接收到某个用户的消息时，告诉所有人，发送的消息
        broadcast(data)

    })
})

//广播，给所有的用户发送消息
function broadcast(msg){
    //server.connection:表示给所用用户发送消息

    server.connections.forEach(item =>{
        item.send(msg)
    })
}

二、增加CSS渲染

增加渲染，肯定是要区分消息类型，所以说每一条消息不能是一个单独的字符串，而应该是一个对象，我们给该对象包含三个变量，类型，消息内容，时间。

const TYPE_ENTER = 0		//0表示进入聊天室
const TYPE_LEAVE = 1		//1表示离开聊天室
const TYPE_MSG = 2			//2表示正常内容

 broadcast({
        type:TYPE_ENTER,
        msg: `${conn.userName}进入了聊天室`,
        time: new Date().toLocaleTimeString().substring(0,7)	
    })

//广播函数中的msg不再是字符串，而应该是对象，所以先转换为JSON字符串
function broadcast(msg){
    //server.connection:表示给所用用户发送消息

    server.connections.forEach(item =>{
        item.send(JSON.stringify(msg))
        //console.log(JSON.stringify(msg)).substring(0,8)
    })
}

在时间表示上之所以截取0-7是因为后边有乱码，也没有找到原因，就直接给舍弃啦

//先将e,data这个JSON字符串转化为对象
socket.addEventListener('message', function(e){
        console.log(e.data)
       	var data =JSON.parse(e.data)

		var dv = document.createElement('div')
        dv.innerText= data.msg + '------' + data.time
        if(data.type === TYPE_ENTER){
             dv.style.color ='green'
       } else if (data.type === TYPE_LEAVE){
            dv.style.color = 'red'
       } else {
            dv.style.color = 'blue'
       }
        //dv.innerHTML =e.data
       div.appendChild(dv
    })

效果展示：