前言
什么是Websocket呢?
我们都知道在Http协议中,客户端与服务器端的通信是靠客户端发起请求,然后服务器端收到请求再进行回应,这个过程中,客户端是主动的,服务器端是被动的。Websocket协议就不一样了,它是基于TCP的一种新的网络协议,它与Http协议不同之处就在于Websocket能实现服务器端主动推送消息到客户端,服务器端与客户端都能发起通信,这一次,服务器端终于也拥有了主动权。
什么是socket.io?
socket.io封装了Websocket以及其他的一些协议,并且实现了Websocket的服务端代码。同时还有很强的兼容性,兼容各种浏览器以及移动设备。有了它,我们能更方便快捷地实现服务器端与客户端之间的实时通讯。
实现功能简述
要实现多人聊天室的核心就是区分当前用户发送的消息与其他用户发送的消息,在这里我通过用户登录使用的用户名来进行区分。所以用户进入首先展示登录页面。
登录成功之后,新用户加入聊天室
如果用户重名,会弹出提示,保持吴彦祖的登录状态,我们再打开一个标签,输入“吴彦祖”查看效果
只有当昵称唯一时,才允许登录,我们再登录一个查看效果
可以看到,当新用户登录时,其他在线用户会收到提示,接下来就是发送消息了
发送的消息是实时推送的,当前用户发送的消息与其他用户发送的消息对话框做了区分。
当用户退出时,系统也会给出提示,效果如下
怎么样,有没有兴趣继续了解呢?下面就开始着手开发吧。
环境搭建
1.安装node.js
后端服务是用的node.js,所以我们首先要进行安装,安装方法很简单,我在之前一篇文章也提过。首先在node.js官网下载稳定版本,下载完成后点击安装,安装过程也很简单,一直next即可,安装完成会自动添加node及npm环境变量。
检验是否安装成功,在cmd输入命令node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功
2.新建项目文件夹,安装socket.io
新建文件夹chatroom,在这里我把它建到D盘根目录下。打开cmd,定位到刚建的chatroom文件夹下,输入npm install socket.io安装socket.io
安装完成之后,可以看到文件夹下多了node_modules文件,里面全是刚下载的socket.io依赖包。
3.新建页面
在chatroom文件夹下新建页面文件index.html,样式chat.css,后端jsapp.js,前端jschat.js,并下载jquery.min.js,socket.io.js。再下载一张图片作为用户头像,放在images/user/下。
目录结构如下