寫在前面

面試官：除了 HTTP，你還用過什么通信協(xié)議？

答：Websocket 在數(shù)字孿生中的應用

隨著 數(shù)智化 轉(zhuǎn)型的推進，越來越多行業(yè)開始加入 數(shù)智化改造 大軍，所謂數(shù)智化，其實就是數(shù)據(jù)化、智能化，主要強調(diào)的是利用目前發(fā)展迅猛的計算機、網(wǎng)絡技術、AI等先進技術，對傳統(tǒng)行業(yè)進行改造、賦能，促進傳統(tǒng)行業(yè)向先進技術靠攏，通過先進技術的賦能，使傳統(tǒng)行業(yè)得到更快的發(fā)展。

而在這一波轉(zhuǎn)型中，尤其亮眼的就要數(shù) 數(shù)字孿生 這個概念了，數(shù)字孿生在我看來，可以簡單分兩部分理解：
第一部分為同步孿生，即利用各種方式采集到的各種數(shù)據(jù)，通過糅合、整理，在計算機上模擬出與現(xiàn)實世界相同的東西，即 孿生，并且在現(xiàn)實世界發(fā)生變化時，孿生世界中的事物能夠呈現(xiàn)相同的狀態(tài)。

第二部分為預測孿生，即通過對于大量數(shù)據(jù)的采集、分析，能夠?qū)?shù)據(jù)與事物發(fā)展的態(tài)勢進行結(jié)合，建立模型，達到預測、模擬效果，提前預防災難發(fā)生等。

目前來看，業(yè)界開發(fā)出來的數(shù)字孿生產(chǎn)品中，分為二維、三維、二維 + 三維這幾種模式，其中二維數(shù)字孿生主要是將現(xiàn)實世界的數(shù)據(jù)做處理后，利用各種可視化表格進行展示，而三維數(shù)字孿生則是利用 WebGL、Three、UE4 等技術，將現(xiàn)實場景直接建模、完全孿生到計算機上，通過數(shù)據(jù)孿生，展示與現(xiàn)實場景相同的孿生場景。

數(shù)字孿生內(nèi)容很多，本次先從簡單的二維數(shù)字孿生的數(shù)據(jù)展示入手，介紹一下二維數(shù)據(jù)孿生應用最簡單的模塊。

數(shù)字孿生中的通訊協(xié)議

Websocket 是什么

WebSocket 是一種在單個 TCP 連接上進行 全雙工 通信的協(xié)議。WebSocket通信協(xié)議于2011年被[IETF]定為標準RFC 6455，并由RFC7936補充規(guī)范。WebSocket API也被 W3C 定為標準。

WebSocket使得客戶端和服務器之間的數(shù)據(jù)交換變得更加簡單，允許服務端主動向客戶端推送數(shù)據(jù)。在WebSocket API中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創(chuàng)建持久性的連接，并進行雙向數(shù)據(jù)傳輸。

Websocket 配置

本次以 Echarts 作為展示數(shù)據(jù)的表格，Node.js 服務器作為數(shù)據(jù)源，演示簡單的數(shù)據(jù)更新通訊過程

基于 Node.js 的 Websocket 服務器搭建

創(chuàng)建 Websocket Server

// 引入 ws 模塊
const WebSocket = require('ws');
// 創(chuàng)建 server 實例并監(jiān)聽 3000 端口
const server = new WebSocket.Server({host:'localhost',port:3000},()=>{
  console.log('WebsocketServer Start !')
});

添加客戶端連接成功回調(diào)

當客戶端對服務端發(fā)起連接時，服務端能夠在 connection 事件中收到請求

server.on('connection',(client)=>{
  console.log('連接成功')
})

添加客戶端消息回調(diào)

由于 Websocket 是全雙工的，所以客戶端和服務端都可以向?qū)Ψ桨l(fā)送消息，因此，我們需要添加消息回調(diào)，接收客戶端發(fā)送的消息

server.on('connection',(client)=>{
  console.log('連接成功')
  // 添加消息回調(diào)
  client.on('message',(msg)=>{
    console.log(msg);
  })
})

基于Vue 的 Websocket 客戶端搭建

客戶端與服務端基本差不多，創(chuàng)建連接、添加連接回調(diào)、消息回調(diào)

var ws = new WebSocket("ws://localhost:3000");
//服務端向客戶端連接執(zhí)行
ws.onopen = ()=>{
  console.log('連接建立')
}
ws.onmessage = (msg) => {
  console.log('收到消息:', msg.data)
}

通過 Websocket 更新 Echart 表格數(shù)據(jù)(基于 Vue + node)

搭建 echart 柱狀圖結(jié)構(gòu)

<template>
  <div id="Websocket-container"></div>
</template>

添加柱狀圖初始化參數(shù)

init(){
  var chartDom = document.getElementById('Websocket-container');
  this.myChart = echarts.init(chartDom);
  var option;
  option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  }
  option && this.myChart.setOption(option);
},

添加柱狀圖更新函數(shù)

update(newData) {
  let option = {
    series: {
      data: newData,
    }
  }
  this.myChart.setOption(option)
},

添加 Websocket 連接與接收數(shù)據(jù)函數(shù)

initWebsocket(){
  var ws = new WebSocket("ws://localhost:3000");
  //服務端向客戶端連接執(zhí)行
  ws.onopen = ()=>{
    console.log('連接建立')
  }
  ws.onmessage = (msg) => {
    console.log('收到消息:', msg.data)
    this.update(JSON.parse(msg.data))
  }
}

向 Websocket Server 添加生成隨機數(shù)據(jù)的函數(shù)

通過生成隨機的數(shù)據(jù)，模擬現(xiàn)實中數(shù)據(jù)的變化，并推送到前端

function createDatas(){
  let arr = []
  for(let i=0;i<7;i++){
    arr.push(Math.floor(Math.random()*100))
  }
  console.log(arr)
  return arr
}

添加數(shù)據(jù)監(jiān)控函數(shù),即數(shù)據(jù)更新函數(shù)

// 每 5s 想前端更新一次
function startMonitor(client){
  setInterval(() => {
    let newDatas = createDatas() 
    client.send(JSON.stringify(newDatas))
  }, 1000 * 5);
}

將數(shù)據(jù)監(jiān)控函數(shù)綁定到 Websocket 的 connection 事件回調(diào)中

server.on('connection',(client)=>{
	console.log('連接成功')
  // 添加消息回調(diào)
  client.on('message',(msg)=>{
		console.log(msg);
	})
  // 開始數(shù)據(jù)監(jiān)聽，當數(shù)據(jù)更新時想客戶端推送數(shù)據(jù)
  startMonitor(client)
})

啟動前端、后端，測試效果

為何采用 Websocket 而不是 HTTP

首先我們知道對于數(shù)字孿生這樣的應用場景，實時同步現(xiàn)實數(shù)據(jù)到孿生世界是必要的環(huán)節(jié)，而當數(shù)據(jù)發(fā)送變化時，孿生世界如果想要做到立即響應，那么就需要立刻通過網(wǎng)絡獲取數(shù)據(jù)

采用 HTTP

HTTP 作為單工通訊，服務器無法主動推送數(shù)據(jù)到前端，那么只能采用輪詢的方式，而采取這樣子的方式有一個矛盾點存在，一方面，為了更加實時的獲取到最新的數(shù)據(jù)，輪詢的間隔時間應該盡可能小，而另一方面，由于發(fā)送 HTTP 會耗費大量的流量，所以輪詢時間應該盡可能大，從而節(jié)省流量的浪費，因此，采取 HTTP 輪詢的方式很難拿出可靠、高效的方案

采用 Websocket

Websocket 作為全雙工的通訊方式，它能夠做到當服務器檢測到數(shù)據(jù)更新的時候，主動向客戶端推送數(shù)據(jù)，而在沒有數(shù)據(jù)更新的時候，網(wǎng)絡帶寬完全是空閑的，不會像采用 HTTP 一樣，中間會有無數(shù)次無意義的數(shù)據(jù)請求，所以采取 Websocket 才是更加合理的數(shù)據(jù)更新方式

總結(jié)

通過對于數(shù)字孿生應用場景的學習和實踐，能夠了解到與以往習慣的通過 HTTP 接口獲取數(shù)據(jù)并進行渲染所不同的方式，也看到了更多的可能，對于數(shù)字孿生，這里所介紹的 Websocket 可能連冰山一角都算不上，希望繼續(xù)深入研究，探索更多、更深入的 數(shù)字孿生相關的技術，更多關于Websocket數(shù)字孿生的資料請關注腳本之家其它相關文章！

最新評論