在日常的互联网产品使用中，很多都是靠前后端数据的交互来完成的。说到数据交互，就不得不提Ajax和WebSocket。它们是数据交互工具，那么它们是什么呢？Ajax在之前的文章中已经讲过了，那么什么是WebSocket呢？WebSocket是HTML5中的一种新协议，实现了浏览器和服务器之间的全双工通信。为了建立WebSocket连接，客户端浏览器首先要向服务器端发起HTTP请求。这个请求不同于通常的HTTP请求，附加的头信息“Upgrade:WebSocket”表明这是一个协议升级的HTTP请求。服务器端解析这些附加的头信息，生成响应信息返回给客户端。客户端和服务端之间的WebSocket连接建立起来，双方就可以通过这个连接通道自由传输信息，这个连接会一直存在，直到客户端或者服务端的其中一个对端主动关闭这个连接。它的本质是通过HTTP/HTTPS协议在握手后创建一个TCP连接用于交换数据。服务端和客户端通过这个TCP连接进行双向的实时数据传输，直到一方主动发出关闭连接的请求或者出现网络错误时，连接才会被关闭。这里以ThingJS中WebSocket数据对接为例，点击【打开读取】读取数据，读取到的数据会显示在数据详情面板中，当温度值大于20℃时，车辆会设置红色效果，点击【关闭阅读】停止数据阅读。变种应用程序；//应用程序对象vartimer;//计时器变量webSocket；//导入样式文件THING.Utils.dynamicLoad(['/guide/examples/css/measure/panel.css'],function(){app=newTHING.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];varcar=app.query('car01')[0];//物体上创建monitorData对图像使用'car.monitor'Data={'Temperature;newTHING.widget.Button('打开阅读',function(){updateData(car);});newTHING.widget.Button('关闭阅读',function(){stopUpdate();});createHtml();initThingJsTip("WebSocket实现了数据的实时双向通信，并且通信不受同源策略限制，不存在跨域问题。
点击【打开阅读】可以读取数据，读取到的数据会显示在数据详情面板中。当温度值大于20℃时，车辆会设置红色效果，点击【关闭读数】停止数据读取！");})})//创建html界面functioncreateHtml(){//数据详情界面letdataDetails=`
