nodeJS 中 soket.io 的简单使用（多人聊天）

1.
socket.io是nodeJS的一个第三方模块，所以我们先将它安装进来
*** npm install socket.io
2.
将它require引入进来，由于socket.io依赖http模块，所以我们同时将http模块引入进来
3.
创建http服务
let httpServer = http.createServer((req,res)=>{
});

httpServer.listen(8080,()=>{
    console.log("启用8080");
});
4.创建soket.io服务器
let wsServer = io.listen(httpServer);

5.
当客服端与服务器发生连接时，会触发connection事件，我们可以给客户端发送信息
let socks = [];
wsServer.on("connection",sock=>{
    socks.push(sock);                    //将所有连接的客户端保存起来

    sock.on("disconnect",()=>{       //断开连接的处理
        let index = socks.indexOf(sock);
        socks.splice(index,1);
    });

    sock.on("mes",str=>{               //接收客户端的请求数据，并给其他连接了的客户端推送数据
        socks.forEach(s=>{
            if(s!=sock){
                s.emit("mes",str)
            }
        });
    });
});

6.前端请求
   前端也需要将socket.io引入，这个有服务端自动提供，我们只需要将其引入
  <script src="http://localhost:8080/socket.io/socket.io.js" charset="UTF-8"></script>
   然后使用io.connect()与服务器建立连接
  同样的，使用on()监听“mes”事件，获取服务器发送过来的数据
  不同的是连接时，服务端触发的是connection事件，而客户端触发的是connect事件
  当断开连接时，都会触发disconnect事件
  前端代码：
  <style>
            #ul1{
                width: 400px;
                height: 600px;
                border: 1px solid black;
                list-style: none;
            }
            .oLi{
                text-align: right;
                color: green;

            }
        </style>
        <script src="http://localhost:8080/socket.io/socket.io.js" charset="UTF-8"></script>
        <script>
            let soke = io.connect("ws://localhost:8080/");        //连接服务器
            window.onload=function(){
                let ul1 = document.getElementById("ul1");
                let txt1 = document.getElementById("txt1");
                let btn1 = document.getElementById("btn1");
                let state = document.getElementById("state");
                btn1.onclick=function(){                       //发送按钮点击事件
                    soke.emit("mes",txt1.value);            //将textarea中的值发送给服务器
                    let oLi = document.createElement("li");     //自身发送的信息的显示和接收到信息的显示不同，所以我们单独设置自身发起的数据的样式
                    oLi.innerHTML = txt1.value;
                    //oLi.style.color = "blue";
                    oLi.className="oLi";
                    ul1.appendChild(oLi);
                };

                soke.on("mes",str=>{                         //接收
                    let oLi = document.createElement("li");
                    oLi.innerHTML = str;
                    ul1.appendChild(oLi);
                });

                soke.on("connect",()=>{
                    state.innerHTML="连接成功";
                    btn1.disabled=false;
                    console.log("已连接");
                });

                soke.on("disconnect",()=>{
                    state.innerHTML="断开连接";
                    btn1.disabled=true;
                    console.log("断开连接");
                });

            };
        </script>

 

        <ul id="ul1"></ul>
        <textarea id="txt1" role="4" cols="40"></textarea>
        <p id="state"></p>
        <input type="button" id="btn1" value="发送">