websocket学习小结

这是我参与更文挑战的第12天，活动详情查看：更文挑战

概念

• 可持久的、全双工的协议

持久

• http发送一个请求后，接收到响应然后就断开
• websocket在通信之后不会断开

全双工

• http只能由客户端向后台发送信息
• 对于websocket来说，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，二者是双向的

几种状态

正在连接

WebSocket.OPENING（ 0）：连接正在建立。
复制代码

已经连接

WebSocket.OPEN（ 1）：连接已经建立。
复制代码

正在关闭

WebSocket.CLOSING（ 2）：连接正在关闭。
复制代码

已经关闭

WebSocket.CLOS（ 3）：连接正在关闭。
复制代码

常用API

更多api查看文档

构造函数

WebSocket(url,[,protocols])
复制代码

• url:后台地址

const ws =new WebSocket('ws:localhost:8000')  //
复制代码

open

• 连接成功

close

• 关闭连接

message

• 接收到消息

error

• 连接失败

const ws =new WebSocket('ws:localhost:8000')   
ws.addEventListener('open', handleOpen, false)
ws.addEventListener('close', handleClose, false)
ws.addEventListener('error', handleError, false)
ws.addEventListener('message', handleMessage, false) //接收到数据
复制代码

应用场景

• 社交聊天
• 弹幕
• 协同编辑文件
• 一些实时应用

实现一个简单聊天室

前端

接收信息

• 前端通过监听message事件来接收信息

  const ws = new Socket('ws:localhost:8000')  //ws协议
  ws.addEventListener('message', handleMessage, false) //接收到数据
  function handleMessage(e) {
      console.log(e)
      const msgData = JSON.parse(e.data)
  	console.log(msgData)
  }
  复制代码

发送信息

• websocket提供了一个send方法来向服务端发送信息

  ws.send(JSON.stringify(sendData))//发送的是字符串
  复制代码

后端

• 这里用node搭建了一个简单的后台服务，需要下载一个ws模块

  npm install ws
  
  复制代码

接收信息

const WS = require('ws')
const server = new WS.Server({ port: 8000 }) //地址端口一定跟前端连接的一致
server.on('connection', handleConnection)  //连接时注册接收消息事件

function handleConnection(ws) {
    console.log('server websocket connection')
    ws.on('message', handleMessage)
}

复制代码

发送信息

• 这里实现的需求是，后台接收到某一个客户端的消息之后，立即向所有的客户端发布这条消息

function handleMessage(msg) {
    // console.log(server.clients)
    // debugger
    server.clients.forEach((c) => {
        //遍历客户端
        console.log(c.send)
        c.send(msg) //发送
    })
}
复制代码

效果图