vue+echarts项目九：使用webSocket优化项目：初识ws

最新推荐文章于 2024-07-15 07:00:00 发布

benlalagang

最新推荐文章于 2024-07-15 07:00:00 发布

阅读量1.3k

点赞数 1

分类专栏： echarts Vue 文章标签： vue.js websocket 前端

本文链接：https://blog.csdn.net/benlalagang/article/details/127091448

版权

Vue 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

echarts

22 篇文章 2 订阅

订阅专栏

WebSocket 可以保持着浏览器和客户端之间的长连接，通过 WebSocket 可以实现数据由后端推送到前端(并不局限于前端一直请求)，保证了数据传输的实时性. WebSocket 涉及到前端代码和后端代码的改造

起步 webSocket 小样

安装 WebSocket 包

npm i ws - S

创建 WebSocket 实例对象并且监听事件(模拟 app.js)

const WebSocket = require("ws")
// 创建出WebSocket实例对象
const wss = new WebSocket.Server({
port: 9998
})

// 监听事件
wss.on("connection", client => {
console.log("服务器连接成功了")
client.on("message", msg => {
console.log("客户端发送数据过来了")
// 发送数据给客户端
client.send(msg)
})
})

node app.js 启动前端按钮才生效

前端测试html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<button id="connect">链接</button>
<button id="send" disabled="true">发送数据</button>
从服务端接收数据如下 <br>
<span id="recv"></span>

<script>
  let connect = document.querySelector('#connect')
  let send = document.querySelector('#send')
  let recv = document.querySelector('#recv')

  let ws = null
  connect.onclick = function () {
    ws = new WebSocket('ws://localhost:9998')
    ws.onopen = () => {
      console.log('服务器链接成功了')
      send.disabled = false
    }
    ws.onclose = () => {
      console.log('链接服务器失败')
      send.disabled = true
    }
    ws.onmessage = msg => {
      console.log('接收到从服务器端发来的数据了')
      console.log(msg)
      recv.innerHTML = msg.data
    }
  }
  send.onclick = function () {
    ws.send(JSON.stringify({
      action:'fullScreen',
      socketType:'fullScreen',
      chartName: 'trend',
      value:'true'
    }))
  }
</script>
</body>
</html>