WebSocket 实现数据实时刷新

WebSocket 是HTML5的一个新协议，WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

一、浏览器客户端

创建一个WebSocket 对象

浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。

//var ws= new WebSocket(url, [protocol] );  //参数 url, 指定连接的 URL。参数 protocol 是可选的，指定了可接受的子协议
var ws= new WebSocket('ws://127.0.0.1:8088')

微信小程序创建一个 WebSocket 连接稍有不同，具体可以参考小程序文档

//小程序创建 WebSocket 连接
wx.connectSocket(Object object)
//示例代码
var ws = wx.connectSocket({
  url: 'wss://example.qq.com',
  header:{
    'content-type': 'application/json'
  },
  protocols: ['protocol1']
})
//小程序接收数据事件
ws.onMessage(data=>{
  console.log(' 返回数据'+ data.data)
})
//更多请查看小程序文档

WebSocket 属性

假定我们刚使用了以上代码创建了 Socket 对象,可以通过ws.readyState查看链接的状态

 ws.readyState    只读属性 readyState 表示连接状态
 0:表示连接尚未建立。
 1:表示连接已建立，可以进行通信。
 2:表示连接正在进行关闭。
 3:表示连接已经关闭或者连接不能打开。

WebSocket 事件

当你获取 Web Socket 连接后，你可以通过send()方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据等。

// 客户端和服务端建立链接时触发，此时可向服务端传递参数
  ws.onopend = function () {
    ws.send('发送数据')
  }
  // 客户端收到服务端发来的消息时，会触发onmessage事件，参数res.data中包含server传输过来的数据
  ws.onmessage = function (res) {
    console.log('接收数据：'+res.data);
  }
 //客户端收到服务端发送的关闭连接的请求时，触发onclose事件
  ws.onclose = function () {
    console.log('链接关闭');
  }
 //如果出现连接，处理，接收，发送数据失败的时候就会触发onerror事件
  ws.onerror = function () {
    console.log('链接发生错误');
  }

WebSocket 方法

客户端和服务器端的 WebSocket 连接建立起来后，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接

ws.send();    //使用连接发送数据
ws.close();    //关闭socket链接

二、服务端

我们用本地电脑使用Node搭建一个WebSocket服务器，示例模拟随机生成数据向客户端不间断传递数据

1、搭建WebSocket服务器

①新建 nodeServer 文件夹
②用命令行 npm init 在当前文件夹内进行初始化,随即生成package.json文件

npm  init

③在使用nodejs搭建WebSocket 时需要用到WebSocket 模块，因此要安装ws模块，
装好之后可以在package.json文件中查看有无安装成功

npm i ws --save

④在当前文件夹内新建index.js文件, 在index.js中引入依赖并创建WebSocket 服务器
当前WebSocket 服务器只为了模拟数据使用并未加密使用wss协议等

//index.js
const WebSocket = require('ws')   //引入ws
const Wss = new WebSocket.Server({port: 8088})   //创建WebSocket 服务器并生成实例

⑤启用WebSocket 服务器，在nodeServer文件夹下使用命令node index.js启用，使用键盘'ctrl+c'停止

node index.js  //启用WebSocket 服务器

⑥当前本地WebSocket 服务器的路径则是'ws://localhost:8088'或者'ws://127.0.0.1:8088'

url:'ws://localhost:8088'  //此路径即是客户端连接的路径或者

2、服务端--模拟随机生成数据向客户端不间断传递数据

情景模拟：将腾讯、百度、阿里股票实时信息发送给客户端。
先默认初始三只股票值，然后通过定时器将股票值随机增减生成新的值发送给客户端

//当前页index.js
const WebSocket = require('ws')  //引入ws
const Wss = new WebSocket.Server({port: 8088})  //创建WebSocket 服务器并生成实例
//初始三只模拟股票值
let stocks = {
  baidu: 80,
  tencent: 100,
  alibaba: 120,
}
//创建指定区间的随机数
function randomInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min
}
//给原始值增加或减少成随机数
function randomStockUpdate() {
  for (let stock in stocks) {
    let randomValue = randomInteger(-80, 80) / 100 //随机生成小数
    stocks[stock] = (new Number(stocks[stock]) + randomValue).toFixed(3) //转换成数字然后保留3位小数
  }
  console.log(stocks)  //打印结果
  //每一秒更新一次数据
  setTimeout(() => {
    randomStockUpdate()
  }, 1000)
}

randomStockUpdate() //调用

//监听客户端，一旦发起向服务端请求连接即通过定时器模拟每1秒返回一次数据
Wss.on('connection', ws => {
  setInterval(() => {
    ws.send(JSON.stringify(stocks))
  }, 1000)
})

通过node index.js命令启动服务器可查看服务器端打印结果

打印结果

3客户端--建立WebSocket 实现数据实时刷新

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>模拟WebSocket 实现数据实时刷新</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  </head>
  <body>
    <div id="container">
      <button class="connect">建立连接</button>
      <button class="close">关闭连接</button>
    </div>
    <script>
      //建立 WebSocket 连接的请求
      var ws = new WebSocket('ws://localhost:8088')
      //打开连接
      $('.connect').click(() => {
        //客户端收到服务端发来的消息时，会触发onmessage事件，参数res.data中包含server传输过来的数据
        ws.onmessage = function(res) {
          console.log('接收值: ' + res.data)
          let stockData = JSON.parse(res.data) //服务端返回的数
        }
      }),
      //关闭socket链接
      $('.close').click(() => {
        ws.close() 
      })
    </script>
  </body>
</html>

建立连接后客户端可查看输出结果

输出结果