# 前言

简单了解 websocket 协议

# http 协议

一种无状态协议,一次请求一次响应称为一次会话,发了请求才能收到响应,服务端无法主动给客户端推送消息,多次会话无法产生任何记录,通信完成立即断开连接

# websocket 协议

允许 Client 和 Server 建立长连接,不限次数互相推送消息,除非服务端或者客户端主动断开,否则连接会一直保持

# websocket 使用

客户端引入

<scriptsrc="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) => {
  // 监听服务端更新消息的事件
})
更新于 阅读次数

请我喝[茶]~( ̄▽ ̄)~*

山河 微信支付

微信支付

山河 支付宝

支付宝

山河 贝宝

贝宝