前言
websocket是HTML5规范中的一部分，为web应用程序客户端和服务端之间提供了一种全双工通信机制（即双方可同时向对方发送消息），由于websocket借鉴了socket这种思想，因此我们先一起来看看什么是socket。
关注+转发私信小编【资料】即可获得资料视频及免费的学习指导 架构资料 以及解答 不懂得问题都可以提出来 之后还会有职业生涯规划以及面试指导
一、Socket简介
socket又称为“套接字”，应用程序一般通过“套接字”向网络发出请求或者应答网络请求，作为Unix的进程通信机制，socket可以实现应用程序间的网络通信，同时也能够使用TCP/IP协议或者UDP协议。
二、TCP/IP协议
这两种协议是目前应用最为广泛的协议，是构成Internet国际互联网协议最为基础的协议，下面来简单看看这两种协议。
- 1、TCP协议：面向连接的、可靠的、基于字节流的传输层通信协议，负责数据的可靠性传输问题。2、IP协议：用于报文交换网络的一种面向数据的协议，主要负责给每台网络设备一个网络地址，保证数据传输到正确的目的地。
三、UDP协议
它是一种无连接、不可靠、基于报文的传输层协议，优点是发送后不用管，速度比TCP块。
四、WebSocket简介
产生背景： 在B/S结构的软件项目中，有时候客户端需要实时的获得服务器消息，但是为了可以简化Web服务器，减少服务器的负担，加快响应速度（因为服务器不需要与客户端长时间建立一个通信链接），默认HTTP协议只支持请求响应模式，因此不容易直接完成实时的消息推送功能，如聊天室、后台信息提示、实时更新数据等功能，于是就出现了websocket这门技术。
再简介一次： websocket是HTML5开始提供的一种浏览器与服务器间进行的全双工通讯网路技术。依靠这种技术可以实现客户端和服务器端的长连接，双向实时通信。唯一有些不足的是少部分浏览器不支持，并且有些浏览器支持的程度与方式有区别。
特点： 事件驱动、异步、使用ws或者wss协议的客户端socket、能够实现真正意义上的推送功能。
五、WebSocket客户端
websocket允许通过JavaScript建立与远程服务器的连接，从而实现客户端与服务器间的双向通信。在websocket中有两个方法：
- 1、send()：向远程服务器发送数据；2、close()：关闭该websocket链接。
websocket同时定义了四个监听函数：
- 1、onopen当网络连接建立时触发该事件；2、当网络发生错误时触发该事件；3、onclose当websocket被关闭时触发该事件；4、onmessage当websocket接收到服务器发来消息时触发的事件，也是通信中最重要的一个监听事件。
websocket还定义了一个readyState属性，这个属性可以返回websocket所处的状态：
- 1、CONNECTING(0)：websocket正尝试与服务器建立连接；2、OPEN(1)：websocket与服务器已经建立连接；3、CLOSING(2)：websocket正在关闭与服务器的连接；4、CLOSED(3)：websocket已经关闭了与服务器的连接；
注意：
websocket的url开头是ws，如果需要ssl加密可以使用wss，当我们调用websocket的构造方法构建一个websocket对象（new WebSocket(url)）的之后，就可以进行即时通信了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket第一个案例</title>
</head>
<body>
<h1>Echo Test</h1>
<input type="text" id="sendTxt" />
<button id="sendBtn">发送</button>
<div id="recv">
</div>
<script>
var websocket = new WebSocket("wss://echo.websocket.org/"); websocket.onopen = function () {
console.log("websocket open"); document.getElementById("recv").innerHTML = "Connected";
}
websocket.onclose = function () {
console.log("websocket close");
}
websocket.onmessage = function (e) {
console.log(e.data);
document.getElementById("recv").innerHTML = e.data;
} document.getElementById("sendBtn").onclick = function () {
var txt = document.getElementById("sendTxt").value;
websocket.send(txt);
}
</script>
</body>
</html>
六、WebSocket的通信原理和机制
既然是基于浏览器的web技术，那么它的通信肯定少不了HTTP，websocket本身虽然也是一种新的应用层协议，但是它也不能够脱离HTTP而单独存在。
具体来说，我们在客户端构建一个websocket实例，并且为它绑定一个需要连接到的服务器地址，当客户端连接到服务端的时候会向服务端发送一个类似下面的HTTP报文：
可以看到，这是一个HTTP的get请求报文，注意该报文中有一个upgrade首部，它的作用是告诉服务端需要将通信协议切换到websocket。如果服务端支持websocket协议，那么它就会将自己的通信协议切换到websocket，同时发给客户端类似于以下的一个响应报文头：
返回的状态码为101，表示同意客户端协议转换请求，并将它转换为websocket协议。以上过程都是利用HTTP通信完成的，称之为websocket协议握手。
经过这握手之后，客户端和服务端就建立了websocket连接，以后的通信走的都是websocket协议了。所以总结为：websocket握手需要借助于HTTP协议，建立连接后通信过程使用websocket协议。
同时需要了解的是，该websocket连接还是基于我们刚才发起HTTP连接的那个TCP连接，一旦建立连接之后，我们就可以进行数据传输了。在websocket中，提供两种数据传输：文本数据和二进制数据。
基于以上分析，我们可以看到，websocket能够提供低延迟，高性能的客户端和服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式，并且提供了一种真正意义上的客户端请求，服务器推送数据的模式，特别适合实时数据交互应用开发。
七、在websocket之前，我们在web上要得到实时数据交互都采用了哪些方式？
（1）定期轮询方式：
客户端按照某个时间间隔不断地向服务端发送请求，请求服务端的最新数据然后更新客户端显示。这种方式实际上浪费了大量的流量，并且对服务端造成了很大压力。
（2）基于长轮询的服务端推送技术：
具体来讲，就是客户端首先给服务端发送一个请求，服务端收到该请求之后如果数据没有更新则并不立即返回，服务端阻塞请求的返回，直到数据发生了更新或者发生了连接超时，服务端返回数据之后客户端再次发送同样的请求。
（3）基于流式数据传输的长连接：
通常的做法是在页面中嵌入一个隐藏的iframe,然后让这个iframe的src属性指向我们请求的一个服务端地址，并且为了数据更新，我们将页面上数据更新操作封装为一个js函数，将函数名当做参数传递到这个地址当中，服务端收到请求后解析地址取出参数（客户端js函数调用名），每当有数据更新的时候，返回对客户端函数的调用，并且将要跟新的数据以js函数的参数填入到返回内容当中。