Socket实现简易“多人聊天室”

Socket实现简易“多人聊天室”

一、了解

1、  简单介绍

websocket能够实现即时通讯和后台主动推送消息，但出于兼容性考虑，我们可以使用websocket的封装库 socket.io模块。此模块遵循socket协议。

2、  socket.io组成

l  socket.io

l  socket.io-client

二、实现流程

1、  新建一个自己文件夹，eg:socket_chat，在这个文件夹里新建两个子文件夹，分别用来装前端代码和后端代码。

2、  将放后端代码的back拖入vs code中，打开终端。

3、  安装express模块

yarn add express –S(或者 cnpm i express –S ,具体输入哪一条命令取决于你安装的是哪个，yarn和cnpm的安装速度相对npm来说要更快一些)。安装好后，可以从左边列表看到生成了如下文件：

4、安装socket.io模块

yarn add socket.io -S （或cnpm i socket.io –S，npm i socket.io -S）

安装好后，可以打开package.json，看到已经生成的生产依赖。

 5、在back目录下新建一个js文件，eg:server.js，单独构建一个socket服务器。

6、监听socket连接

7、构建前端页面，发送socket请求

8、用户点击按钮即向socket发送数据，客户前端向服务器后端发送消息

9、服务后端接受客户前端发来的消息，并且回复前端已经收到消息

10、客户端接受服务后端返回的消息

 11、后端转发前端发来的消息 

12、整理前端代码格式，并把后端发来的消息显示在页面上

13、到这里，已经建成一个可以发送信息的页面了，前端页面效果如下：

14、后端显示

15、不过，这只是个单人模拟多人聊天，真正要让用户都可以通过加入聊天室，只需要将127.0.0.1改为自己本机的IP，用户通过live-server插件进行访问，端口号为5500，大家就可以真正加入同一聊天室，一个简易的聊天室就搭建完成了。