使用websocket搭建一个简单的聊天室

最近呢，深思自己虽然了解过websocket，但是一直没去实践，很难发现问题，更别说解决问题。所以呢，趁着还没上班，先打个聊天室玩一玩。

先放个最终成果链接：布局有点丑，网速有点慢（但都不是重点）

还有一个github地址：github

---

正文开始！！！

一、开发环境

我这里采用nodejs为后台，使用的包有express、http、fs、以及关键包 socket.io。而前端则不采用框架，直接就是原生js加css，需要引用到socket.io.js文件，该文件在npm i socket.io完成后，可以在node_modules下找到，举个栗子，我是在服务端\node_modules\[email protected]@socket.io-client\dist的路径下找到的。

二、服务器和浏览器互通消息

为了使用websocket，在后台和前端都需要初始化socket对象，然后通过自带的on方法进行事件监听，emit方法进行事件注册。

在进行消息的互通前需要建立连接：

客户端发起连接事件以及连接成功监听

服务端连接成功事件

在浏览器和服务器连接成功后，就可以书写消息接收操作，比如说当用户登录发现昵称已被占用，

服务器则发起昵称已存在事件

客户端通过监听nickExisted事件

和其他事件一样，function是可以带值传输的，可以利用这个值发送消息，图片数据等等。

三、发送图片

发送图片可以通过将图片转化成base64的方式，进行发送。

四、小技巧

由于是聊天室，可以先将表情包预加载，这样在发送表情包的时候仅仅需要发送图片的地址，并且由于预加载原因聊天十分顺畅，但是如果是发送图片的话，就有点弱了，因为socket只在接受图片完毕才响应事件，所以更好的解决方法时在发图片的时候先发一段文字信息，通知其他人有人发图片啦 ！！！

---

结束语

 目前这个聊天室还不完善，在之后我会慢慢地加入一些新功能的。谢谢观看啦。