websocket聊天室，基于socket.io

传统的开发方式都是前台向后台请求，后台返回数据。

后台是一个被动者的角色，不会主动给前台去发送数据。

websocket的出现就是是后台可以主动给前台发送数据。

这里我使用的是socket.io这个库来做一个简易的聊天室

1、首先执行

npm init

进行初始化（一些列的name，author，description等自己设定）

完成后项目目录下会有一个package.json的文件，里面有一些配置信息

2、执行如下命令，安装socket.io库

npm i socket.io --save-dev

安装完成后，项目目录会多一个socket.io的版本，如下图所示

3、目录结构如下图

如果你只是为了练习的话，可以将其中style.css，index.js都写在index.html中

4、server.js代码

前面引入模块，创建服务啊等不作过多介绍了

下面这两句话的意思是

let sockArr = [];        //创建一个用来存放连接到服务器的客户端
let wsServer = io.listen(httpServer);  //将对http的请求转接到socket 

下面是处理断开连接的部分，当浏览器关闭，或者连接断开的时候讲其从 数组中删除掉

sock.on('disconnect',()=>{
        let nowIndex = sockArr.indexOf(sock);

        sockArr.splice(nowIndex,1);
    })

当前台有内容发过来时，后天将数据分发给连接到它的客户端，达到聊天的效果

sock.on('msg', (str) => {
        sockArr.forEach((s) => {
            if (s != sock) {
                s.emit('msg', str);
            }
        })
    })

服务器端完成后，我们来写html部分的，结构如下图

展示效果如下

因为我目前没有开启server.js文件或者网络有问题等，所以会显示上面哪一行红字，给到提示无法连接，当连接成功的时候，这行红色的字就会影藏

剩下的js部分代码比较简单，需要注意的是红框这个和let sock = io.connect("ws://localhost:8080/")这两个。

剩下的我会在代码后边用注释标注出来

let sock = io.connect("ws://localhost:8080/");

//这里当连接上后（connect就是连接成功）是哪个无法连接服务器，请检查网络这句话隐藏掉
sock.on('connect',()=>{
    document.getElementsByClassName('error-connect')[0].style.display = 'none'
});
//同理，这里显示出来
sock.on('disconnect',()=>{
    document.getElementsByClassName('error-connect')[0].style.display = 'block'
})


window.onload = function () {
    let ul = document.getElementById('ul');
    let txt = document.getElementById('test');
    let btn = document.getElementById('btn');

    //这里点击click会将你输入的聊天信息发送给服务器
    btn.onclick = function () {
        sock.emit('msg', txt.innerText);

        //应为自己的信息不仅要发送给服务器，还要自己也能看到，所以创建一个元素，同时把自己放输入的文字填充到这个元素中，并且给其设置className（显示绿色），
        let myLi = document.createElement('li');
        myLi.innerHTML = txt.innerText;
        myLi.className = 'me';

        txt.innerText = '';

        ul.appendChild(myLi);
    }

    //这里是接受到服务器给分发下来的信息，也就是别人在这个聊天室中发送的内容
    sock.on('msg', (str) => {
        let lis = document.createElement('li');
        lis.innerHTML = str;
        ul.appendChild(lis);
    })
}

然后我们在服务器环境下运行index.html，

我这里用的是http-server

同时启动server，在命令行下运行

node server.js

如下图我们开启两个窗口

当左边发送一句话的时候，右边的窗口也很快能显示出来这句话，这样就达到的实时聊天的功能