大家好，欢迎踏入野生程序猿的生存之道，我是你们的老朋友大猿！
今天和大家聊聊啥是websocket。我们先看两个场景：
场景一：在线客服
相信大家浏览网页的时候会注意到，有一些网站是有在线客服的，点击后会打开一个聊天框，能够和工作人员进行即时通讯，就如同网页版的QQ一样。
场景二：实时监控
我们在一些办事大厅中，经常看到有一些监控大屏，上面布满了各种各样的数据，而且这些数据都是实时变化的，你刚做完一笔业务，屏幕上的数字就立马加一了。
这些场景其实用的就是websocket技术。
什么是websocket？
相信大家对http协议都不陌生了，你打开一个网页，加载一个图片，点击一个按钮，这些都是通过http协议实现的。http协议简单的说就是一次请求(Request)和一次响应(Response)，就如同你在和10086发短信，你发一条，它回一条，你不发，它不会主动回(它偶尔发广告不算)。
而websocket是基于http协议的，但又不太一样，它的感觉就像是你在和朋友打电话，谁都可以主动说话，而且一方说话后，另一方并不是非要有回应。
有同学说，大猿，你BB了那么多，你说的那俩场景，我用Ajax轮询不照样能实现吗？这位同学，请看下面这两个对话：
Ajax轮询：
客户端：大哥，在吗？服务器：在客户端：有新的数据吗？服务器：没有……过了一会……客户端：大哥，在吗？服务器：在客户端：有新的数据吗？服务器：没有……过了一会……客户端：大哥，在吗？服务器：在客户端：有新的数据吗？服务器：有了，给你客户端：好勒！我把他显示在页面上！……过了一会……客户端：大哥，在吗？服务器：在客户端：有新的数据吗？服务器：没有websocket：
客户端：大哥，在吗？服务器：在客户端：我请求和你保持通讯，有新消息请及时告诉我服务器：好的……过了一会……服务器：来新数据了，拿好客户端：好勒！我把他显示在页面上！……过了一会……服务器：来新数据了，拿好客户端：好勒！我把他显示在页面上！可以看到，Ajax轮询其实是非常浪费资源的，因为如果你设置的轮询时间短，那大部分请求可能都没有数据，而如果你设置轮询时间长，那就无法满足实时性的要求。
客户端的实现
在客户端中，我们需要创建一个websocket实例，并实现一个信息处理的方法，来接收并处理服务器发来的信息。
创建websocket实例：
var ws = new WebSocket("ws://localhost:8080/myWebSocket");执行完这句代码，客户端便会开始尝试与服务器建立连接了。其中这个url是服务端地址，后面的章节会讲到。
实现连接建立完成时的监听方法：
ws.onopen = function() { //你的业务逻辑};onopen会在连接建立成功后执行，这里面可以写一些初始化逻辑，比如身份的校验。校验身份就需要向服务端发消息，怎么发的？继续往下看。
向服务端发消息：
ws.send("这里是消息体");简单吧，一行代码就行。通常我们会约定好消息体的格式(通常是个Json字符串)，以方便服务端进行处理，就比如你在网页QQ上发文本，发表情，发图片，单聊，群聊，对服务器来说处理肯定不一样。
接收并处理服务端发来的消息：
ws.onmessage = function(msg) { //你的信息处理逻辑}凡是服务器发来的消息，都会触发onmessage方法，方法入参就是消息体，在这里面只需按照约定的消息格式进行相应的业务处理就可以了。
异常处理：
有时候，因为网络等原因，websocket连接可能会断掉，这时就会触发onerror和onclose方法。注意，在连接出错时，会先触发onerror方法，然后触发onclose方法。那么这两个方法的意义是什么呢？最常用的就是让我们实现断线重连。
ws.onclose = function(e) { ws = new WebSocket("ws://localhost:8080/myWebSocket");}可以看到，断线重连的逻辑也很简单，只需重新new一个就行啦~
好了小伙伴们，你们学会了吗？下一节我会详细介绍websocket的服务端实现，点我头像能学习更多实用的开发小技巧，别忘了点关注哦~
下一节来了：千呼万唤始出来，websocket后台篇
