在日常使用的互联网产品中,很多都是前后端数据的交互来完成的,说到数据交互就不得不提Ajax和WebSocket,它们可是数据交互的利器,那么它们分别是什么?Ajax上篇文章已经讲过了,那WebSocket又是什么呢?
WebSocket 是 HTML5 一种新的协议,实现了浏览器与服务器之间的全双工通信。
为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。
其本质是先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接,服务端与客户端通过此 TCP 连接进行数据的双向实时传输,直到有一方主动发送关闭连接请求或出现网络错误才会关闭连接。
下面来一个ThingJS中的WebSocket数据对接示例,点击【开启读取】进行数据读取,读取到的数据将在数据详情面板进行显示,当温度值大于20℃时,车辆设置红色效果,点击【关闭读取】停止数据读取。
总结一下WebSocket最大的优点,服务器可以主动向客户端推送信息,客户端也可以主动向服务器发送信息,真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制,不存在跨域问题。