websocket聊天室

古城微笑少年丶 2023-06-05 08:49 37阅读 0赞

实现效果如下：

![1092504-20190709143345276-784581236.png][]

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

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

浏览器端代码：

window.οnlοad=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);
                })
            }

服务端代码：

开发中的总结：

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

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

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

转载于:https://www.cnblogs.com/maoBable/p/11157232.html

[1092504-20190709143345276-784581236.png]: /images/20230601/d4bda82f8c104769a581b69545590c05.png