基于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聊天室下载