websocket学习笔记

websocket是H5的新内容,是一个持久化的协议,我们可以使用它进行一些实时互动。

特点

(1)建立在 TCP 协议之上,服务器端的实现比较容易。
(2)与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
(3)数据格式比较轻量,性能开销小,通信高效。
(4)可以发送文本,也可以发送二进制数据。
(5)没有同源限制,客户端可以与任意服务器通信。
(6)协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
Websocket是基于HTTP协议的,或者说借用了HTTP的协议来完成一部分握手。
我们在访问H5格式的网页的时候,URL的协议部分有变成ws吗?没有!那服务器怎么知道你使用websocket协议呢?答案是在HTTP请求里面“偷渡”

有卵用

之前有提到HTTP1.1的keepalive,但事实上HTTP本身具有限制,Request = Response,一个request对应一个response,如果你有进一步思考的话,就会发现HTTP中只有发送了请求才会有应答,应答是一个被动的形式。另外在HTTP的小结里面提过,HTTP的特点有一个是无状态,那么在新的请求里面就要重新传输鉴别信息,就很烦噜。
而websocket就不一样了!(前面说了那么多HTTP的坏话就为了在这里夸你...)

图片1

图片2

假设我们做一个最基本的聊天儿室,没有websocket的时候,我们一般怎么搞?可能ajax了就(如果你看过某本PHP+ajax项目教程的话)
聊天室怎么看对方有没有给我发消息啊?HTTP刚才说过它坏话了,没有请求就没有响应,请求了才知道对方有没有消息,就好比你借钱给小明了,你要怎么讨债,ajax轮询就是你每天问:小明我是你的债主小王不信你看看这是借条,今天能还钱给我吗?没有我明天再来问问。然后你就干别的事,明天这个时候再来问;而long poll就是你站小明跟前,我是你霸霸,这是借条,你还不还钱?不还我就不走了,我别的事也不干了,除非你还钱给我。
websocket就是,小明啊,你还钱的话转到我支付宝就行啦,这是我支付宝帐号(建立连接)。然后小明有钱就直接转你支付宝了。(然而现实的债务关系没有这么甜hhhh)

怎么看

在请求头里面,多了这些东西:

Upgrade: websocket//Upgrade 向服务器指定某种传输协议以便服务器进行转换
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==//浏览器生成的随机key,验证websocket协议
Sec-WebSocket-Protocol: chat, superchat//是一个用户定义的字符串,用来区分同URL下,不同的服务所需要的协议
Sec-WebSocket-Version: 13//版本

服务器响应如何?如果你记得HTTP的各种状态码的话,应该知道101switching protocol

HTTP/1.1 101 Switching Protocols
Upgrade: websocket//声明使用websocket协议
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=//经过服务器确认,并且加密过后的 Sec-WebSocket-Key(个人揣测这里应该使用服务器的私钥加密作为一个数字签名,浏览器使用服务器公钥解密,和请求的key进行对比确认)
Sec-WebSocket-Protocol: chat

怎么用

在js里面应用websocket就是new一个websocket对象,且URL的协议部分改为ws(https则对应wss),在node.js可以使用socket.io,非常好用!
新建一个websocket实例:

    var ws = new WebSocket('ws://localhost:8080');

(当然有时候还得验证一下支不支持websocket)

if(window.WebSocket){...}else{//not support websocket}

事件
Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发
方法
send()
close()
属性

  • readyState
    0 - 表示连接尚未建立。
    1 - 表示连接已建立,可以进行通信。
    2 - 表示连接正在进行关闭。
    3 - 表示连接已经关闭或者连接不能打开。
  • bufferedAmount
    只读属性 。已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • websocket websocket是web传递消息的一种协议。web传递消息的方式主要有轮询(polling)...
    西普士阅读 2,058评论 0 2
  • WebSocket简介 谈到Web实时推送,就不得不说WebSocket。在WebSocket出现之前,很多网站为...
    吧啦啦小汤圆阅读 8,350评论 15 75
  • 一些参考内容: https://www.ntu.edu.sg/home/ehchua/programming/we...
    貘鸣阅读 2,243评论 0 1
  • 时隔多日,我决定再次联系 或许,我一开始便抱着悲的想法,所以就成就了最后的悲 悲喜总是交加。 如若没有昔日的欢喜,...
    bufans阅读 352评论 0 3
  • 作者:钟钟 昨天在朋友圈看到一篇文章《年味变淡是从我们变得随便开始》,文中提到过年的仪式变得越来越精简,我也确实有...
    钟语等到你阅读 478评论 0 1

友情链接更多精彩内容