WebSocket和Socket

tags：WebSocket和Socket

引言：好多朋友想知道WebSocket和Socket的联系和区别，下面应该就是你们想要的

先来一张之前收集的图，我看到这张图真的是笑了，当时还给我朋友门转发了一下，不知道你笑了没有。

联系

看完上面的图，应该猜到了，他们之间也确实没有什么实质性的联系，当然除了名字有点相同，文章后面有名称的由来可以参考阅读

Socket

英文socket的意思是插座，网络中的Socket是一个抽象的接口，可以理解为网络中连接的两端。通常被叫做套接字接口，其意义在对传输层进行封装屏蔽了传输层的复杂性。它并不是一个协议，是为了大家更方便的使用传输层协议产生的一个抽象层。大部分的主流编程语言都提供socket函数。我们拿php来举例说明

<?php
1. socket_create() - 创建一个套接字
2. socket_accept() - Accepts a connection on a socket （接收）
3. socket_bind() - 给套接字绑定IP和端口号
4. socket_connect() - 和一个套接字建立连接
5. socket_listen() - Listens for a connection on a socket （监听）
6. socket_last_error() - Returns the last error on the socket
7. socket_strerror() - Return a string describing a socket error
?>

我们可以用这些函数来建立连接实现通信功能。关于Socket我们就说这些

WebSocket

说道WebSocket了解过一些的人可能会觉得有些高大上的感觉，它的诞生还有些故事可以讲，大概是在为w3c放弃了html后，还有那么一群人不服气（不想放弃），想要继续推动html发展，同时他们也发展了一些其他的网络标准，并且被官方接收。而WebSocket就是其中一种，是为了创建一种双向通信（全双工）的协议，来作为HTTP协议的一个替代者，以解决基于http上的长轮询等技术解决不了（或者解决的不那么优美）的问题。而且这厮一开始并不叫WebSocket，好像是叫webConnect之类的，最后是一位工程师提议说要么咱们叫WebSocket吧，然后。。。。。，好了故事就这样，他既然是HTTP的替代者，我们首先看一下它和HTTP（或者HTTP的长连接）的联系和区别。

WebSocket和HTTP 1.1的联系

首先两者都是应用层协议，而且 WebSocket 在建立连接时，需要借用 http 的 101 switch protocol 来达到协议转换，为了建立一个 WebSocket 连接，客户端浏览器首先要向服务器发起一个HTTP请求，这个请求和通常的HTTP请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"和"Connection: Upgrade"表明这是一个申请协议升级的 HTTP 请求，服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket 连接就建立起来了，在建立连接后，就和HTTP没有关系了，双方就可以通过这个连接通道自由的传递信息。

当然，也有可能服务器不支持WebSocket，那就老老实实的用http吧，目前大部分浏览器和服务器都已支持WebSocket。

贴一段简单WebSocket客户端的js代码

<script type="text/javascript">
    //语法 var Socket = new WebSocket(url, [protocol] );
    var ws = new WebSocket("ws://localhost:6688/send");
    //连接建立时触发
    ws.onopen = function(evt) {
        console.log("Connection open ...");
        ws.send("Hello WebSockets!");
    };
    //接收消息时触发
    ws.onmessage = function(evt) {
        console.log("Received Message: " + evt.data);
        ws.close();
    };
    //关闭连接触发
    ws.onclose = function(evt) {
        console.log("Connection closed.");
    };
    //通信发生错误时触发
    ws.onerror = function(evt) {
        console.log("Connection Error.");
    };
    //检查浏览器是否支持WebSocket
    if(typeof WebSocket != 'undefined'){
        alert("您的浏览器支持 WebSocket!");
    }else{
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
    }
</script>

WebSocket和HTTP 1.1区别

我们来看一下他的格式：

//一个WebSocket连接始于握手（handshake）
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

对上面状态进行解释：

前两行跟HTTP的Request的起始行一样，而真正在WS的握手过程中起到作用的是下面几个header域。

Upgrade：websocket

upgrade是HTTP1.1中用于定义转换协议的header域。它表示要升级（转换）到某个协议（如果服务器支持的话）。
Connection：Upgrade 表示要进行升级协议
Sec-WebSocket-Key：用来发送给服务器过滤非预期的请求(比如手动填写header中的一些信息，但本身不想升级到WebSocket。这时候，由于Sec-WebSocket-Key和一些相关项被禁止手动设置，所以可以过滤掉出现非预期的情况)。
Origin：作安全使用，防止跨站攻击，浏览器一般会使用这个来标识原始域。
Sec-WebSocket-Protocol：客户端支持的子协议的列表。
Sec-WebSocket-Version：客户端支持的WS协议的版本。

//服务端应答handshake 101表示切换
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

上面是报文区别，还有一些其他的特性

WebSocket的连接必须是一个直接连接（这个我还需要仔细研究研究，还不是很透彻，如果有懂的朋友可以帮我理解理解将不胜感谢。回头我仔细研究一下通信的方式和数据帧格式）。
WebSocket连接建立之后，通信双方都可以在任何时刻向另一方发送数据（即全双工，这是最主要的）。
WebSocket连接建立之后，数据的传输使用帧来传递，不同于Request。

由于展开来讲的话篇幅太长，大家也可以自行深入了解。