如何基于websocket开发类似于微信聊天的页面（除基本的聊天功能附带发送图片和表情功能）

基于nodejs和websocket开发的类似微信聊太页面

首先在服务端创建app.js文件，并创建服务器

//引入express模块并使用  相当于var app = express()
var app = require('express')() 
//引入http通信模块,并且开设服务器  http.server(app)
var server = require('http').Server(app)
//引入websoket模块skcket.io,  并且将websoket与Http关联
var io = require('socket.io')(server)
//定义一个常量为空的users数组，用于存储用户数据
server.listen(3000,() =>{
    console.log('服务器启动成功')
})

浏览器端要连接上我们当前部署的这个服务器

//连接socketio服务
const socket = io('http://127.0.0.1:3000')

服务器开设好之后首先监听连接

//监听连接
io.on('connection', function(socket){})

然后监听事件

//监听当用户加入功能
socket.on('login', data => {})
//监听用户断开连接
socket.on('disconnect', () => {})
//监听聊天的信息
socket.on('sendMessage', data => {
//广播给所有的用户
io.emit('receiveMessage', data)
    })
//监听发送图片的功能
socket.on('sendImage', data => {
//广播给所有用户
io.emit('receiveImage', data)
    })

浏览器端对这些事件做一些处理，这里建议用Jquery简单一点
总体效果如下面所示，除基本的聊天功能外，附带发送图片功能，发送表情功能（用jquery-emoji插件）






有需要的可以下载完整的代码，下载之后首先需要下载所需要的模块

//下载所需要用到的模块，package-lock-json有所依赖的包，直接输入下面命令进行下载
npm install

最后直接运行app.js

//运行app.js
node app.js

完整的代码在以下连接：weChat聊天室下载