版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/CJXBShowZhouyujuan/article/details/77746283
最近在工作中用到了websocket，在逐步的总结下这块的知识。
这篇文章不会讲很多原理性的东西，还下感性的认识下websocket，后面也附带了一个Demo。
我会在后面逐步深入的理解websocket之后在写文章总结学习心得。
一、websocket的基本知识
1、websocket是HTML5 提供的在Web应用程序中
客户端和
服务器端之间进行的
非HTTP的通信机制。
2、使用websocket 可以在服务器端和客户端之间建立起一个非HTTP的
双向连接。这个连接是
实时的、也是
永久的、除非被显式的关闭。
（2.1）正式基于这个特性，websocket允许，服务器不再是被动的接受请求，而是可以主动的向客户端发送数据，不需要重新的建立连接。
（2.2）这个实现的具体表现是，当服务器接收到一个websocket请求时，服务器会建立一个websocket的连接，允许服务端和客户端互通消息。本质上是一个TCP连接。
在客户端向服务端发送请求时如果是websocket请求，就会在请求头部设定
connection:Upgrade
Upgrade:websocket.
这篇文章暂时不写关于原理的东西，后面会详细的总结这里的东西。
至此，我们可以这么理解，就是客户端向服务端发送了请求，并在请求头部告诉服务端这是一个websocket的请求。服务端接受到之后，就会建立一个socket的连接在通知到客户端。这样双方就约定好了。
3、在websocketAPI中，可以使用跨域通信技术，在实用跨域通信技术时，应该确保客户端与服务器端是相互信任的，服务器端应该判断它的服务发送给所有的客户端还是只发送给某些受信任的客户端。
二、websocket API
websocket 的API很简单。
在demo1中列举了websocket API 的各个实用方法。
1、判断是否支持WebSocket.
2、如果支持 先将URL字符串作为参数，然后调用websocket对象的构造函数来创建与服务器之间的通信连接：
websocket = new WebSocket("ws://echo.websocket.org/");
注：
提供了一个专门用来测试WebSocket的服务器"ws://echo.websocket.org"。
URL 必须使用ws 或者 wss (加密通信) 作为开头。在javascript中可以通过访问websocket对象的url属性来重新获取。
3、连接建立好了，就可以在客户端和服务端双向发送消息了。
websocket.send('data');
使用send 只能发送文本数据，但是可以使用JSON对象把任何javascript对象转换成文本数据在发送。
4、建立连接成功，socket连接打开的事件
// 连接成功建立的回调方法
websocket.onopen = function(){
console.log('websocket open');
document.getElementById("recv").innerHTML = "connected";
}
5、连接关闭的事件监听
//连接关闭的回调方法
websocket.onclose = function(){
console.log("websocket close");
}
6、接受到消息的回调
//接收到消息的回调方法
websocket.onmessage = function(e){
console.log(e.data);
document.getElementById('recv').innerHTML = e.data;
}
7、监听窗口关闭
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
websocket.close();
}
8、可以通过readyState的属性值来获取WebSocket对象的状态。
CONNECTING 0 正在连接
OPEN 1 已建立了连接
CLOSING 2 表示正在关闭连接
CLOSED 3 表示已经关闭了连接
如上是demo1的测试
三、发送和接受的数据
1、可以发送文本。这种的直接发送就可以了。
2、可以发送一切javascript中的对象。使用JSON.parse（把文本数据转换为js对象） 和 JSON.stringify （把对象转换为文本数据）
3、可以发送ArrayBuffer对象和Blob对象。
我们在接收Blob对象需要将WebSocket对象的binaryType属性设定为 “blob”.
为了接收ArrayBuffer对象，需要将WebSocket对象的binaryType属性值设定为“arraybuffer”.
四、使用场景
WebSocket API 适用于当多个客户端与同一个服务器需要实现时事通讯的场合。
（1）多人在线游戏
（2）聊天室
（3）实时交互评论的网站
五、区分是否需要使用
WebSocket API 为web应用程序的搭建提供了一种新的架构。我们在构建程序的时候，要根据自己的业务需求去确定要不要使用
（1）当服务器不会同时处理过多的来自客户端的请求，同时也不需要主动联系客户端时，就没有必要使用
（2）反之当服务器需要同时处理大量来自客户端的请求，并且确保服务器端只需要花费较少的性能成本来处理请求时，可以使用这种新型的方式。
Demo2,Demo3，Demo4 逐步的实现了一个聊天室的功能。界面没有做修饰很简陋，后面会修饰下界面在后面的博客中总结代码编写过程。