【解決方法】websocket と node js のチャットでユーザーを削除するにはどうすればよいですか?

[ad_1]

 just start learn WebSocket and made chat with Node js. But if user disconnect i dont know how delete him in page(so that other users can see that he has left). I

This my localhost on Node.js, I think need delete user from array users but it dont work.

JavaScript

<pre>let server=require('ws').Server;
let s=new server({port:'9001'})
let users=[]


s.on('connection',(x)=>{
    x.on('message',(mess)=>
    { let inputMess=JSON.parse(mess);
        
       x.send(JSON.stringify(users))
        
        if(inputMess.type==='users'){
           users.push(inputMess.text);
           s.clients.forEach(client=>{
            client.send(JSON.stringify({type:'users', text:inputMess.text}))
        
        })
        }
        else if(inputMess.type==='del'){
           console.log(inputMess.user)
        }
        else if(inputMess.type==='message'){
         s.clients.forEach((client)=>{
            
            if(client!==x){
                let data=JSON.stringify({type:'message',user:inputMess.user,text:inputMess.text});
                client.send(data)
            }
         })
        }
        
    })  
    x.on('close', ()=>{console.log('User exit')})
       
            
    console.log("New user")
         
        })

これはクライアントです

JavaScript

<pre> let sendButton=document.querySelector('button')
        let input=document.querySelector("input")
        let socket=new WebSocket('ws://localhost:9001')
        let span=document.querySelector('span')
        let inputLog=document.querySelector("#names")
        let subLog=document.querySelector('#sendlog')
        let chat=document.querySelector('.conteiner')
        let spisok=document.querySelector('ul')
        

        let currentName;
     
        let flag=false;
        console.log(socket);
        console.log(users)

        subLog.addEventListener('click',function(){
           currentName=inputLog.value
              
            let mess=JSON.stringify({type:'users',text:currentName})
            socket.send(mess)
            index++;
            console.log(users)
            
            inputLog.value=""
            inputLog.setAttribute('readonly','readonly')
            subLog.setAttribute("disabled", "disabled");
        })
        sendButton.addEventListener('click',function(){
            let mess=JSON.stringify({type:'message',user:currentName,text:input.value});
            
            chat.insertAdjacentHTML('beforeend',`<div class='mess'>Ти:${input.value}</div>`)
            socket.send(mess)
            input.value=""
        })
       
        
         socket.onmessage= (event) => {
                 let mess=JSON.parse(event.data);
                 console.log('You have 1 new message!', mess); 

                 if(mess.type==='users' ){
                    let li=document.createElement('li');
                    li.textContent=mess.text;
                    spisok.append(li)
                 } 
                 else if(mess.type ==='message'){
                 
                    chat.insertAdjacentHTML('beforeend',`<div class='mess'>${mess.user}:${mess.text}</div>`)
                    
                 }  
                 else if(mess.type === 'delete'){
                    console.log(mess.user) 
                 } 
                  else{
                 if(!flag){
                     
                     for(i=0;i<mess.length;i++){
                        let id=mess[i]
                        if(currentName!=id){ 
                       
                        console.log(mess[i])
             let li=document.createElement('li');
                    li.textContent=mess[i];
                    spisok.append(li) 
                        }}}}
                        flag=true}
                socket.onclose=(event)=>{
                     let us=JSON.stringify({type:'del',user:currentName})
                      socket.send(us)
                    console.log(event) 
                }

私が試したこと：

Actually i dont know how do this

解決策 1

WebSocket と Node.js を使用して Web アプリケーションのチャットルームからユーザーを削除するには、アクティブな接続のリストからユーザーの接続を削除するメカニズムを実装する必要があります。

を使用してこれを行う方法の例を次に示します。 ws Node.js の WebSockets のライブラリ:

JavaScript

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

// Array to store the list of active connections
const connections = [];

wss.on('connection', (ws) => {
  // Add the new connection to the list
  connections.push(ws);

  ws.on('close', () => {
    // Remove the connection from the list when it closes
    connections = connections.filter((conn) => conn !== ws);
  });
});

この例では、 connections 配列は、アクティブな接続のリストを格納するために使用されます。新しい接続が確立されると、それは push 方法。接続が閉じられると、それは配列から削除されます。 filter 方法。

その後、 connections メッセージをブロードキャストしたり、チャットルームのユーザーに対して他のアクションを実行したりするための配列。たとえば、次のように使用できます。 forEach 接続を反復処理し、それぞれにメッセージを送信するメソッド:

JavaScript

connections.forEach((conn) => {
  conn.send('Hello, everyone!');
});

[ad_2]