关于javascript:从零开始学习3D可视化之数据对接2

在日常应用的互联网产品中，很多都是前后端数据的交互来实现的，说到数据交互就不得不提 Ajax 和 WebSocket，它们可是数据交互的利器，那么它们别离是什么？Ajax 上篇文章曾经讲过了，那 WebSocket 又是什么呢？
WebSocket 是 HTML5 一种新的协定，实现了浏览器与服务器之间的全双工通信。
为了建设一个 WebSocket 连贯，客户端浏览器首先要向服务器发动一个 HTTP 申请，这个申请和通常的 HTTP 申请不同，其中附加头信息 ”Upgrade: WebSocket” 表明这是一个申请协定降级的 HTTP 申请，服务器端解析这些附加的头信息而后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连贯就建设起来了，单方就能够通过这个连贯通道自在的传递信息，并且这个连贯会继续存在直到客户端或者服务器端的某一方被动的敞开连贯。

其本质是先通过 HTTP/HTTPS 协定进行握手后创立一个用于替换数据的 TCP 连贯，服务端与客户端通过此 TCP 连贯进行数据的双向实时传输，直到有一方被动发送敞开连贯申请或呈现网络谬误才会敞开连贯。

上面来一个 ThingJS 中的 WebSocket 数据对接示例，点击【开启读取】进行数据读取，读取到的数据将在数据详情面板进行显示，当温度值大于 20℃时，车辆设置红色成果，点击【敞开读取】进行数据读取。

var app; // App 对象
var timer; // 定时器
var webSocket;
 
// 引入款式文件
THING.Utils.dynamicLoad(['/guide/examples/css/measure/panel.css'], function() {
 app = new THING.App({url: 'https://www.thingjs.com/static/models/storehouse'});
 
 app.on('load', function() {
 // 设置摄像机地位和指标点
 app.camera.position = [44.38316010361372, 22.256383671664036, 37.42310488848945];
 app.camera.target = [19.488379488180318, 0.17527928595920675, 5.827049588512047];
 
 var car = app.query('car01')[0];
 // 物体身上创立 monitorData 对象 用于存储动静监控数据
 car.monitorData = {'温度': ''};
 
 new THING.widget.Button('开启读取', function() {updateData(car);
 });
 
 new THING.widget.Button('敞开读取', function() {stopUpdate();
 });
 
 createHtml();
 initThingJsTip("WebSocket 实现了数据的实时双向通信。且通信不受同源策略的限度，不存在跨域问题。<br> 点击【开启读取】进行数据读取，读取到的数据将在数据详情面板进行显示，当温度值大于 20℃时，车辆设置红色成果，点击【敞开读取】进行数据读取！");
 })
})
 
// 创立 html 界面
function createHtml() {
 // 数据详情界面
 let dataDetails =
 `<div id="dataDetails" class="tj-panel property-panel tj-has-title tj-sizable tj-property-panel tj-pinned" style="position: absolute; right: 10px; top: 220px; width: 315px; height: 416px; transform: none;">
 <div class="tj-close"></div>
 <div class="tj-title" style="cursor: move; user-select: none;"> 数据详情 </div>
 <div class="tj-panel-body" style="padding-top: 0px;">
 <div class="tj-panel-container tj-scroll-bar">
 <table class="tj-table">
 <div class="empty"> 暂无数据 </div>
 </table>
 </div>
 </div>
 </div>`;
 $('#div2d').append(dataDetails);
 // 点击按钮敞开面板
 $('#dataDetails .tj-close').on('click', function() {$('#dataDetails').css('display', 'none');
 });
}
 
/**
 * 数据对接
 */
function updateData(obj) {
 
 // 对接自有 websoket 服务器
 if (!webSocket) {
 
 // 如果 ThingJS 网站是 https 则对应 wss
 // 如果 ThingJS 网站是 http 则对应 ws 即可
 webSocket = new WebSocket('wss://3dmmd.cn/wss');
 // 建设 websocket 连贯胜利触发事件
 webSocket.onopen = function() {console.log("websoket 服务器连贯胜利...");
 };
 
 // 接管服务端数据时触发事件
 webSocket.onmessage = function(evt) {
 var data = evt.data;
 nowDatetime();
 if (($('.empty').length)) {$('.empty').remove();}
 if (!($('.tj-group').length)) {
 let tbody = `<tbody class="tj-group" id="tb-line"></tbody>`;
 $('.tj-table').prepend(tbody);
 }
 let tr =
 `<tr class="tj-group-content">
 <td class="tj-key">` + dateString + `</td>
 <td class="tj-value">` + data + `℃</td>
 </tr>`;
 $('.tj-group').prepend(tr);
 // 设置物体身上的监控数据
 obj.setAttribute("monitorData/ 温度", data);
 changeColor(obj);
 };
 
 webSocket.onclose = function(evt) {console.log("websoket 敞开...");
 webSocket = null;
 }
 }
}
 
/**
 * 敞开数据申请
 */
function stopUpdate() {
 // 敞开连贯
 webSocket.close();}
 
/**
 * 获得零碎日期
 */
function nowDatetime() {var date = new Date();
 var hours = (date.getHours()) > 9 ? (date.getHours()) : "0" + (date.getHours());
 var minutes = (date.getMinutes()) > 9 ? (date.getMinutes()) : "0" + (date.getMinutes());
 var seconds = (date.getSeconds()) > 9 ? (date.getSeconds()) : "0" + (date.getSeconds());
 dateString =
 hours + ":" +
 minutes + ":" +
 seconds;
 return dateString;
}
 
/**
 * 当车辆的温度值超过 20 时，更改小车色彩
 */
function changeColor(obj) {var value = obj.getAttribute("monitorData/ 温度");
 if (value > 20) {obj.style.color = 'rgb(255,0,0)';
 } else {obj.style.color = null;}
}

总结一下 WebSocket 最大的长处，服务器能够被动向客户端推送信息，客户端也能够被动向服务器发送信息，真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限度，不存在跨域问题。
—————————————————
数字孪生可视化：https://www.thingjs.com/