Learning 3D Visualization data Docking from Scratch (2)

In the daily use of the Internet products, many are to complete the interaction of the front and back end data, when it comes to data interaction, we have to mention Ajax and WebSocket, they are the data interaction of the sharp tools, then what are they? Ajax was covered in the last article, but what about WebSocket?

WebSocketHTML5 is a new protocol to achieve full duplex communication between the browser and the server.

To establish a WebSocket connection, the client browser first sends an HTTP request to the server. This request is different from the usual HTTP request, with the additional header “Upgrade: “WebSocket” indicates that this is an HTTP request for a protocol upgrade. The server parses the additional headers and sends a reply back to the client. The WebSocket connection is established and the two sides can communicate freely over the connection channel. The connection persists until either the client or the server actively closes the connection.



In essence, a TCP connection for data exchange is created after a handshake through HTTP/HTTPS protocol. The server and client transmit data in real time through this TCP connection in both directions. The connection is closed only when one party actively sends a request to close the connection or a network error occurs.



Click “Open Read” to read the data, and the data read will be displayed in the data details panel. When the temperature value is greater than 20℃, the vehicle will set the red effect. Click “Close Read” to stop reading the data.

var app; // Var timer; // Timer var webSocket; / / into the style file THING. Utils. DynamicLoad (['/guide/examples/CSS/measure/panel. CSS '], function () {app = new THING. The app ({url: 'https://www.thingjs.com/static/models/storehouse' }); App. on('load', function() {// Set camera position and target app.camera. Position = [44.38316010361372, 22.256383671664036, 37.42310488848945]; App.camera. Target = [19.488379488180318, 0.17527928595920675, 5.827049588512047]; var car = app.query('car01')[0]; // Create a monitorData object on the object to store dynamic monitoring data car. MonitorData = {' temperature ': ''}; New thing.widget. Button(' open to read ', function() {updateData(car); }); New thing.widget. Button(' turn off reading ', function() {stopUpdate(); }); createHtml(); InitThingJsTip ("WebSocket implements real-time two-way communication of data. In addition, the communication is not restricted by the same origin policy, and there is no cross-domain problem. <br> Click "Open Read" to read the data. The data read will be displayed in the data detail panel. When the temperature value is greater than 20℃, the vehicle will set the red effect, click "Close Read" to stop reading the data! ); })}) 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 class="tj-panel-body" style="padding-top: 0px; > <div class="tj-panel-container TJ-scture-bar "> <div class="empty"> </div> </table> </div> </div> </div>`; $('#div2d').append(dataDetails); / / click on the button to close the panel $(' # dataDetails. Tj - close), on (' click ', function () {$(' # dataDetails). CSS (' display ', 'none'); }); } / function updateData(obj) {// Connect to websocket server if (! WebSocket) {// If the ThingJS site is HTTPS, it corresponds to WSS // If the ThingJS site is HTTP, it corresponds to WS webSocket = new WebSocket('wss://3dmmd.cn/wss'); Websocket.onopen = function() {console.log(" Websocket server connected successfully...") ); }; 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/ temperature ", data); changeColor(obj); }; Websocket.onclose = function(evt) {console.log("websoket close...") ); webSocket = null; } /** * stop data request */ function stopUpdate() {// Close 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; Function changeColor(obj) {var value = obj.getattribute ("monitorData/ temperature "); If (value > 20) {color = RGB (50, 50, 50); font-size: 14.0px; background-color: RGB (255,255,255);" } else { obj.style.color = null; }}

To sum up the biggest advantages of WebSocket, the server can take the initiative to push information to the client, the client can also take the initiative to send information to the server, the real real-time data two-way communication. Moreover, WebSocket communication is not restricted by the same origin policy, so there is no cross-domain problem. — — — — — — — –, digital twin visualization: https://www.thingjs.com/