使用WebSockets搭建多人在线聊天室

使用WebSockets搭建多人在线聊天室

配置

需要安装好node.js环境

安装package包socket.io

要分别给client客户端即前端和server服务器即后端设置socket.io

前端设置参考client-api

后端设置参考server-api

如果用的是npm，那么看这个包socket.io

首先端口号要设置，记住没有写端口号的那是默认的端口号80,

然后如果想在函数中用console.log，那么前端的日志输出会在浏览器的console看到，后端的日志输出会在vscode(ide)的Terminal终端输出。

搭建环境

client: 前端设置参考client-api

Server: 后端设置参考server-api

基本上要让connection成功

业务

视图层

用户的名字：input element, value attribute

用户要发送的信息： Input element, value attribute

提交发送：button element, onclick event

消息展示-用户发送的信息：

name: message

消息展示-用户输入状态： p element

逻辑层

发送消息时，前后端代码怎么写？

前端： 首先点击提交按钮触发点击事件，在这个click事件里，要使用socket.emit(eventName[, …args][, ack])，这里可以随便取一个事件名A，然后将要发送的信息A作为第二个args传入。根据需求判断需不需要回调函数。比如告诉客户端服务器收到信息了，或者要从后端返回一些数据到前端等等。

后端： 使用socket.on(eventName, callback)去监听事件A，回调函数里面将信息A作为参数传入。后端收到消息后，要把这个消息A再返回给前端。就是说要让其他的用户或者打开网页能看到这条发送的消息A。这里要用到的方法是socket.emit(eventName[, …args][, ack])，比如这里给这个事件取名为事件B，然后这条消息A作为参数传入。

前端：使用socket.on(eventName, callback)去监听事件B，回调函数里面将从后端拿到的消息A作为参数传入。之后将这个消息A，渲染后加载到DOM里面的消息展示。

再完善一下代码，让用户体验更好。这里我们把消息展示-用户输入状态这个做出来

前端：可以使用addEventListener去监听keypress事件来模拟用户在键盘上按键，在回调函数中，使用emit方法，事件名比如取typing，将用户输入状态作为参数传入

后端：使用on方法去监听typing事件，回调函数中将从前端拿到的用户输入状态作为参数传入。使用Flag: ‘braodcast’，即用这个方法，方法名这里也取typing，其实和那个typing互不影响，这个用户输入状态将会发送给非这个消息发送者的其他用户或客户端。同样这个用户输入状态作为第二个参数传入。

前端： 使用on方法监听typing事件，用户输入状态作为参数传入到回调函数中，然后让这个用户输入状态，渲染后加载到DOM，在消息展示中出现。

在用户提交消息到消息展示到界面，这个用户输入状态存在。所以代码在优化一下，让用户体验更好。这里要通过逻辑控制一下这个用户状态的显示

前端：在监听从后端发送的事件A时，在用户发送的信息在页面展示之前，清空用户状态展示

还可以继续优化。。后面在看

代码

代码会上传到github上

参考