前端websocket 实时通信

文章目录

前端websocket 实时通信
- 什么是websocket
- 为什么传统的http协议不能做到websocket实现的功能
- websocket前后端所用到的事件对比
- WebSocket.readyState
- 代码

什么是websocket

websocket是HTML5开始提供的一种网络通信协议，它诞生的目的是在浏览器之间建立一个不受限的双方通信的通道，比如说，服务器可以在任意时刻发送信息给浏览器。在websocket的API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输

为什么传统的http协议不能做到websocket实现的功能

http协议是一个请求-响应协议，请求必须先由浏览器发送给服务器，服务器才能响应

websocket前后端所用到的事件对比

在这里插入图片描述

WebSocket.readyState

readyState 属性返回实例对象的当前状态，共有四种状态
0 - 表示正在连接
1 - 表示连接成功，可以进行通信
2 - 表示连接正在关闭
3 - 表示连接已经关闭，或者打开连接失败

代码

安装ws包

npm i ws -d

websocket连接成功会生成一个key，key是用来标识连接的，而不是加密的

index.htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h3>我是客户端</h3>


    <script>
      let ws = new WebSocket('ws://localhost:5000') //接口地址
      //连接成功后
      ws.onopen = (evt) => {
        console.log('连接开启')
        ws.send('hello 我是客户端') //利用send向后端发送数据
      }

      //传递和接收服务器数据的方法
      ws.onmessage = (evt) => {
        console.log('我是服务器传递过来的消息---' + evt.data)
        ws.send('我是客户端发送的第二条信息')
        ws.close()
      }

      // 连接失败时触发
      ws.onerror = () => {
        alert('连接失败')
      }

      // 连接关闭
      ws.onclose = () => {
        alert('连接关闭')
      }
    </script>
  </body>
</html>

index.js

const Websocket = require("ws")
//引用server类并且实例化，定义服务器端口为3306
const wss = new Websocket.Server({ port: 5000 })

wss.on("connection", (ws) => {
    ws.on("message", (message) => {
        console.log(`客户端发送过来的信息是${message}`);
        ws.send("我是服务器")
    })
})