从零开始学习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/

从零开始学习3D可视化之数据对接（2）相关推荐

从零开始学习3D可视化之坐标系
1. 世界坐标系 2. 父物体坐标系 3.自身坐标系要想控制一个3D可视化对象的空间位置,首先需要理解空间坐标系.在 ThingJS 开发平台中,使用右手坐标系,横轴为 X 轴和 Z 轴,竖轴为 Y ...
从零开始学习3D可视化之模型动画
获取模型动画播放模型动画停止播放模型动画在搭建3D可视化场景的过程中,我发现很多模型都有内置动画,很多模型在制作阶段就内置了动画,如果模型有内置动画,可以在 ThingJS 中利用 API 调用 ...
从零开始学习3D可视化之摄像机
数字孪生可视化场景中的摄像机,与大家拍照时使用相机的功能相似,数字孪生可视化场景中用摄像机来确定观察 3D 场景的视角.摄像机包含两个重要的位置参数:镜头位置 position 和被拍摄物体的位置 t ...
快速有效的从零开始学习3d建模?
其实对于初学者来说,3D建模是一个专业性偏强且极其难入手的游戏制作专业技术.如果是无基础从零开始的学习的话,没有一个好的学习方法和好的指导老师的话,还是比较困难的.那么如何从零基础开始学习3D建模? ...
如何快速有效的从零开始学习3d建模?
其实对于初学者来说,3D建模是一个专业性偏强且极其难入手的游戏制作专业技术.如果是无基础从零开始的学习的话,没有一个好的学习方法和好的指导老师的话,还是比较困难的.那么如何从零基础开始学习3D建模? ...
深度学习3D可视化工具——Zetane Engine
神经网络在工作的时候,里面到底是什么样? 为了能透视这个"AI黑箱"中的过程,加拿大蒙特利尔一家公司开发一个3D可视化工具Zetane Engine.只需要上传一个模型,Zetan ...
如何从零开始学习3D视觉？
写在前面话不多说,送给所有星球成员专属福利,星球成员可以免费领取「3D视觉工坊」小鹅通课程八五折券. 正文「导师对3D视觉不是很懂,得不到指导,有项目进来,但是不知道怎么去做?技术栈完全没概念.博 ...
什么是数据中心3D可视化管理系统?
什么是数据中心3D可视化管理系统? 随着我国运维技术的不断发展,3D可视化技术已成为时下主流的数据中心机房的管理系统之一.它以人们最直观的方式呈现,提高信息交互的效率,降低信息损耗和时间损耗,让数据中 ...
3dmax和python做3d动画_ThingJS问答录 | 三维动画师和程序员的职业前景 3D 可视化
AutoCad+3DMax,先做建筑表现,后期学习Revit向建筑行业发展. 就 @绿帽蝙蝠侠的精彩回答,我很赞同这个软件组合建议. 现在有三维开发,需要一定的动画基础,利用开发逻辑实现,所以两个不 ...

从零开始学习3D可视化之数据对接（2）

从零开始学习3D可视化之数据对接（2）相关推荐

最新文章

热门文章