CS►web►服务器推送

关于websocket

websocket属于服务器推送技术的一种。
HTML5定义了 WebSocket 协议，以及相关的编程API，能更好的实现双向通信且节省服务器资源和带宽。

WebSocket 实际上指的是一种协议，与我们熟知的 Http 协议是同等的一个网络协议。用网络模型结构来解释的话， WebSocket 和 Http 协议都属于 应用层协议，两者都基于传输层协议 TCP。

http协议 http://
ftp协议 ftp://
websocket协议 ws://

Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
在握手阶段是一样的

背景

以前的网站为了实现推送功能，使用的方法都是轮询。所谓的轮询就是在特定的时间间隔（例如1秒），由浏览器向服务器发出一个 Http request，然后服务器返回最新的数据给客户端浏览器，从而给出一种服务端实时推送的假象。由于Http Request的Header（请求头）很长,而传输的数据可能很短就只占一点点，每次请求消耗的带宽大部分都消耗在 Header上。从网上资料得知后来还有改进的轮询方法叫做 Comet，使用 Ajax。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源。

流程

  1. 首先WebSocket 服务器启动，并监听端口
  2. 客户端new websocket(dfd)，建立连接

客户端的API (js)

不同浏览器有不同的实现，但都提供的javascript API，所以客户端API都类似，或者可以统一API。

服务端的实现

websocket服务器则因语言不同而提供不同的调用方式。

是叫实现，还是应该叫封装？

原理

1
2
3
4
5
6
7
8
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket      ## 这个就是Websocket的核心了，告诉Apache、Nginx等服务器：注意啦，窝发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。
Connection: Upgrade    ##
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

参考

疑问

  • websocket是依赖TCP吗？

如何debug websocket？

方式一：在chrome inspect中查看websocket连接

network下的WS选项可以查看websocket连接。
能看到Request连接:wss://echo.websocket.org/
在frame中能看到明文数据，wss竟然也是明文传输

超详细教程

方式二：通过chrome console中命令查看

1
2
var webSocket = new WebSocket('ws://address:port');
webSocket.onmessage = function(data) { console.log(data); }

方式三：在chrome internal里查看

chrome://net-internals/#sockets

方式四：通过抓包查看

见network/tools/wireshark/抓包

如何查看websocket发送的数据？

浏览器inspect能看到websocket连接，为什么没看到发送的数据包？
那么通过抓包总能够看到吧。

  • websocket的实现原理是什么？在TCP的基础上做了什么？加了header？

online demo

##

##