# 前言
简单了解 websocket 协议
# http 协议
一种无状态协议，一次请求一次响应称为一次会话，发了请求才能收到响应，服务端无法主动给客户端推送消息，多次会话无法产生任何记录，通信完成立即断开连接
# websocket 协议
允许 Client 和 Server 建立长连接，不限次数互相推送消息，除非服务端或者客户端主动断开，否则连接会一直保持
# websocket 使用
客户端引入
<script src="https://cdn.jsdelivr.net/gh/mydracula/image@master/20210228/8117647db67e2bbdbdc0a85673b714c3.io.js"></script> |
创建连接对象
// 此处端口为服务端运行端口 | |
const ws = io.connect('http://localhost:8888') |
服务端安装 socket.io 模块
npm i socket.io@2.3.0 -S |
通过 emit() 主动向客户端发送消息，反之也可以用 on() 来监听一个数据，等待客户端来触发
const server = require('http').Server(app) | |
const io = require('socket.io')(server) | |
io.on('connect', (socket) => { | |
// 只要连接了，就触发客户端定义的事件 | |
setTimeout(() => { | |
socket.emit('msg', '连接成功！') | |
}, 2000) | |
// 监听一个事件，等待客户端触发 | |
socket.on('ask', (data) => { | |
console.log(data) | |
}) | |
}) | |
server.listen(8888) | |
module.exports = app |
此时客户端监听事件或者发送消息
socket.on('msg', (data) => { | |
console.log(data) | |
}) | |
socket.emit('ask', uname) |
# websocket 广播
使用 websocket 做一个极其简单的聊天室，需要获取到登录用户
客户端向服务端携带参数发送请求，这里传入一个 curName
const socket = io.connect('http://172.16.100.666:8888', { | |
query: 'users=' + curName | |
}) |
服务端通过 request._query.key 拿到连接时传入的数据
socket.broadcast.emit() 方法给所有连接的客户端发送广播消息，排除当前 socket 对应的客户端
io.on('connect', (socket) => { | |
// 当连接之后，要拿到当前登录者的信息 | |
const userName = socket.request._query.users | |
// console.log(userName) | |
socket.broadcast.emit('tips', `您的好友${userName}已经上线!`) | |
socket.on('updateMsg', (data) => { | |
socket.broadcast.emit('sendMsg', { | |
data, | |
userName | |
}) | |
}) | |
}) |
客户端需要监听事件，服务端需要发送广播消息排除自身，服务端监听客户端发送的消息，再次广播发消息给其他客户端，那么客户端还要重新监听服务端发消息的事件来更新
ws.on('tips', (data) => { | |
// 接受服务端的广播信息 | |
}) | |
// 客户端发送消息 | |
ws.emit('updateMsg', text.value) | |
ws.on('sendMsg', (obj) => { | |
// 监听服务端更新消息的事件 | |
}) |
