websocket聊天室

实现效果如下：

websocket最大的遍历性是服务器可以向客户端推送消息。

现在能实现websockt的库很多，我选择了socket.io,今天找空闲看来下socket.io的文档，动手实现了下(服务端用node实现)；

浏览器端代码：

        window.onload=function(){
            let sock=io.connect('ws://localhost:3000/');
            let oEl=document.querySelector('.prompt');
            
            // 连接
            sock.on('connect',()=>{
                oEl.style.display='none';
            })
            // 断开连接
            sock.on('disconnect',()=>{
                oEl.style.display='block';
            })
            
            // 发送消息
            let eUl=document.querySelector('.message_box');
            let eBtn=document.querySelector('.send_btn');
            let eText=document.querySelector('.text_box');
            eBtn.addEventListener('click',function(){
                sock.emit('message',eText.value);
                let eLi=document.createElement('li');
                eLi.innerHTML=eText.value;
                eLi.className='me';
                eUl.appendChild(eLi);
                eText.value='';     
            })

            // 接受消息
            sock.on('message',(data)=>{
                let eLi=document.createElement('li');
                eLi.innerHTML=data;
                eUl.appendChild(eLi);
            })
        }

服务端代码：

const http=require('http');
const io=require('socket.io');

let httpServer=http.createServer((req,res)=>{});
httpServer.listen(3000);

let wsServer=io.listen(httpServer);
let aSocket=[];
wsServer.on('connection',socket=>{
    aSocket.push(socket);
    
    // 断开连接
    socket.on('disconnect',()=>{
        // 使用连接时的cocket
        let index=aSocket.indexOf(socket);
        if(index!=-1){
            aSocket.splice(index,1);
        }
    })
    // 接受
    socket.on('message',(data)=>{
        // 发送
        aSocket.forEach(item=>{
            if(item!=socket){
                item.emit('message',data);
            }
        })
    })
})

开发中的总结：

1.c端的链接是connect，而s端的链接用的是connection

2.c端和s端都是用on监听，用emit发送消息

3.为了实现一对多的分发，需要在服务端把链接的实例socket存在一个数据组中，同时把断开连接的实例移除