微信小程序网络之WebSocket（场景篇）（6）

落日映苍穹つ 2023-06-18 11:00 6阅读 0赞

### 1.WebSocket 是什么 ###

> **WebSocket**一种在单个 [TCP][] 连接上进行[全双工][Link 1]通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范，WebSocketAPI被W3C定为标准。WebSocket 是独立的、创建在 TCP 上的协议，和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换，使用的 TCP 端口是80，可以用于绕过大多数防火墙的限制。  
> WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端直接向客户端推送数据而不需要客户端进行请求，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并允许数据进行双向传送。  
> 目前常见的浏览器如 Chrome、IE、Firefox、Safari、Opera 等都支持 WebSocket，同时需要服务端程序支持 WebSocket。

官方解释其实很简介明了，对WebSocket就是：  
**WebSocket 是一种协议，基于 TCP 协议；HTTP 也是一种协议，基于 TCP 协议。互相协调促进，相辅相成的俩基友。WebSocket不是HTTP协议，HTTP只负责建立WebSocket连接。**

### 2.WebSocket 理解误区 ###

1.[WebSocket API][] 是 [HTML5][] 标准的一部分， 但这并不代表 WebSocket 一定要用在 HTML 中，或者只能在基于浏览器的应用程序中使用。  
2.WebSocket 与Nodejs没有必然存在关系，nodejs只是实现更便捷

### 3.WebSocket 使用场景 ###

原文翻译：[开源中国][Link 2]  
WebSockets支持及时数据交换，并被所有现代浏览器支持。

> **1.社交订阅**

对社交类的应用的一个裨益之处就是能够即时的知道你的朋友正在做什么。虽然听起来有点可怕，但是我们都喜欢这样做。你不会想要在数分钟之后才能知道一个家庭成员在馅饼制作大赛获胜或者一个朋友订婚的消息。你是在线的，所以你的订阅的更新应该是实时的。

**2.多玩家游戏**

网络正在迅速转变为游戏平台。在不使用插件（我指的是Flash）的情况下，网络开发者现在可以在浏览器中实现和体验高性能的游戏。无论你是在处理DOM元素、CSS动画，HTML5的canvas或者尝试使用WebGL，玩家之间的互动效率是至关重要的。我不想在我扣动扳机之后，我的对手却已经移动位置。

**3.协同编辑/编程**

我们生活在分布式开发团队的时代。平时使用一个文档的副本就满足工作需求了，但是你最终需要有一个方式来合并所有的编辑副本。版本控制系统，比如Git能够帮助处理某些文件，但是当Git发现一个它不能解决的冲突时,你仍然需要去跟踪人们的修改历史。通过一个协同解决方案，比如WebSocket，我们能够工作在同一个文档，从而省去所有的合并版本。这样会很容易看出谁在编辑什么或者你在和谁同时在修改文档的同一部分。

**4.点击流数据**

分析用户与你网站的互动是提升你的网站的关键。HTTP的开销让我们只能优先考虑和收集最重要的数据部分。然后，经过六个月的线下分析，我们意识到我们应该收集一个不同的判断标准——一个看起来不是那么重要但是现在却影响了一个关键的决定。与HTTP请求的开销方式相比，使用Websocket，你可以由客户端发送不受限制的数据。想要在除页面加载之外跟踪鼠标的移动？只需要通过WebSocket连接发送这些数据到服务器，并存储在你喜欢的NoSQL数据库中就可以了（MongoDB是适合记录这样的事件的）。现在你可以通过回放用户在页面的动作来清楚的知道发生了什么。

**5.股票基金报价**

金融界瞬息万变——几乎是每毫秒都在变化。我们人类的大脑不能持续以那样的速度处理那么多的数据，所以我们写了一些算法来帮我们处理这些事情。虽然你不一定是在处理高频的交易，但是，过时的信息也只能导致损失。当你有一个显示盘来跟踪你感兴趣的公司时，你肯定想要随时知道他们的价值，而不是10秒前的数据。使用WebSocket可以流式更新这些数据变化而不需要等待。

**6.体育实况更新**

现在我们开始讨论一个让人们激情澎湃的愚蠢的东西——体育。我不是运动爱好者，但是我知道运动迷们想要什么。当爱国者在打比赛的时候，我的妹夫将会沉浸于这场比赛中而不能自拔。那是一种疯狂痴迷的状态，完全发自内心的。我虽然不理解这个，但是我敬佩他们与运动之间的这种强烈的联系，所以，最后我能做的就是给他的体验中降低延迟。如果你在你的网站应用中包含了体育新闻，WebSocket能够助力你的用户获得实时的更新。

**7.多媒体聊天**

视频会议并不能代替和真人相见，但当你不能在同一个屋子里见到你谈话的对象时，视频会议是个不错的选择。尽管视频会议私有化做的“不错”，但其使用还是很繁琐。我可是开放式网络的粉丝，所以用WebSockets getUserMedia API和HTML5音视频元素明显是个不错的选择。WebRTC的出现顺理成章的成为我刚才概括的组合体，它看起来很有希望，但其缺乏目前浏览器的支持，所以就取消了它成为候选人的资格。

**8.基于位置的应用**

越来越多的开发者借用移动设备的GPS功能来实现他们基于位置的网络应用。如果你一直记录用户的位置(比如运行应用来记录运动轨迹)，你可以收集到更加细致化的数据。如果你想实时的更新网络数据仪表盘(可以说是一个监视运动员的教练)，HTTP协议显得有些笨拙。借用WebSocket TCP链接可以让数据飞起来。

**9.在线教育**

上学花费越来越贵了，但互联网变得更快和更便宜。在线教育是学习的不错方式，尤其是你可以和老师以及其他同学一起交流。很自然，WebSockets是个不错的选择，可以多媒体聊天、文字聊天以及其它优势如与别人合作一起在公共数字黑板上画画...

### 4.WebSocket 相对HTTP优势 ###

1.Header

服务器与客户端之间交换的数据包档头很小，而HTTP的Header数据包很大，而实际有效数据只占其三分之一，所以可以很高的提高传输效率,

2.服务器推送

服务器可以主动传送数据给客户端，具有主动性，而非HTTP的被动型。

### 5.WebSocket 请求如何辨别 ###

对于 WebSocket 来说，它必须依赖 HTTP 协议进行一次握手，握手成功后，数据就直接从 TCP 通道传输，与 HTTP 无关了。  
先看其request和response消息头：  
浏览器请求

GET / HTTP/1.1
    Upgrade: websocket
    Connection: Upgrade
    Host: example.com
    Origin: null
    Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==
    Sec-WebSocket-Version: 13```
    服务器回应

HTTP/1.1 101 Switching Protocols  
Upgrade: websocket  
Connection: Upgrade  
Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=  
Sec-WebSocket-Origin: null  
Sec-WebSocket-Location: [ws://example.com/][ws_example.com]

Upgrade: websocket向服务器声明此请求为ws请求。
    但是要注意的，这个websocket协议也需要服务端的设计支持。
    >WebSocket 跟其他 API 比较不一样的是，它不仅仅依赖于浏览器支持，同时要求服务器和代理（假若需要经过代理的话）支持。WebSocket 本质上跟 HTTP 完全不一样，只不过为了兼容性，WebSocket 的握手是以 HTTP 的形式发起的，如果服务器或者代理不支持 WebSocket，它们会把这当做一个不认识的 HTTP 请求从而优雅地拒绝掉。
    
    ###6.WebSocket 与HTTP如何相辅相成
    先根据业务了解：
    **短连接**
     连接->传输数据->关闭连接 HTTP是无状态的，浏览器和服务器每进行一次HTTP操作，就建立一次连接，但任务结束就中断连接。短连接是连接后发送后接收完数据后马上断开连接。 
      **长连接** 
    连接->传输数据->保持连接 -> 传输数据-> 。。。N。。。。 ->关闭连接。 长连接指建立连接后不管是否使用都保持连接，但安全性较差。 
    #####综上：Websocket是一个**持久化**的协议，相对于HTTP这种**非持久**的协议来说。
    最常见的HTTP 1.1中的AJAX 一个post对应 一个response，n个请求就得n个post+n个response。
    即使有个keep-alive，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request = Response ， **在HTTP中永远是这样，也就是说一个request只能有一个response**。而且这个response也是**被动**的，不能主动发起。
    就算是AJAX轮询，本质也是被动的。
    
    #所以持久化与非持久化都是根据具体业务的要求，并没有谁绝对好坏，相互结合应用，更能提高网站的效率！！！在微信小程序里面同理。

[TCP]: https://link.jianshu.com?t=https://zh.wikipedia.org/wiki/TCP
[Link 1]: https://link.jianshu.com?t=https://zh.wikipedia.org/wiki/%E5%85%A8%E9%9B%99%E5%B7%A5
[WebSocket API]: https://link.jianshu.com?t=http://dev.w3.org/html5/websockets/
[HTML5]: https://link.jianshu.com?t=http://en.wikipedia.org/wiki/HTML5
[Link 2]: https://link.jianshu.com?t=https://www.oschina.net/translate/9-killer-uses-for-websockets
[ws_example.com]: https://link.jianshu.com?t=ws://example.com/