使用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只在接受图片完毕才响应事件,所以更好的解决方法时在发图片的时候先发一段文字信息,通知其他人有人发图片啦 !!!





结束语

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

你可能感兴趣的:(使用websocket搭建一个简单的聊天室)