<div class="content" id="articleContent">
<div class="ad-wrap">
<p><a href="https://my.oschina.net/u/2663968/blog/3051541" style="color:#A00;font-weight:bold;">为什么80%的码农都做不了架构师？>>> </a> <img alt="hot3.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-cf0d92129138e2c138e143696168013a.png"></p>
</div>
<p>作者：汪娇娇</p>
<p>时间：2017年8月2日</p>
<p>先看一个有道释义：</p>
<p><img alt="131007_iK0N_2941696.png" height="124" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-f408c212c69ea6af8fabcd1b2e83fb4c.png" width="131"></p>
<p>其实释义的挺形象的，下面我来一一解释哈：</p>
<p>1、聊天室：webSocket有名的应用就是聊天室了；</p>
<p>2、服务：webSocket提供客户端请求的服务器和服务；</p>
<p>3、套接字：源IP地址和目的IP地址以及源端口号和目的端口号的组合叫套接字，webSocket就是服务端和客户端的结合；</p>
<p>4、协议：webSocket是基于TCP的一种新的网络协议。</p>
<span id="OSC_h1_1"></span>
<h1><strong>一、webSocket与ajax</strong></h1>
<p>作为一个码了还算久代码的前端，说起webSocket，脑子里最先闪现的当然就是ajax ajax ajax......ajax是啥，ajax刚出来时，可谓轰动一时，让我们愉快地告别那种提交一个表单必须得填完所有信息，然后再把数据转给服务器验证，结果发现有一个小小的输入框里输错了信息，然后又改掉重新提交走着重复的路的痛苦时代，所以它最大的贡献就是局部刷新。当然，不是说有了webSocket，它就out了，ajax现在依旧好用。下面稍微比较了下ajax和webSocket：</p>
<span id="OSC_h2_2"></span>
<h2>1、ajax</h2>
<span id="OSC_h4_3"></span>
<h4>（1）浏览器主动发送消息给服务器；</h4>
<span id="OSC_h4_4"></span>
<h4>（2）非实时数据交互（异步，局部刷新）。</h4>
<p><img alt="134913_BBd8_2941696.png" height="274" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e918b12081fe46fb9880f33c1b088ee9.png" width="392"></p>
<p>原生写法：</p>
<p>四部曲：<strong>ajax对象、建立连接、发送请求、获取相应</strong>。</p>
<p>更通俗的用打电话来比喻，那就是：<strong>电话、拨号、说话、听到对方回应</strong>。<a href="https://jojojojo.duapp.com/websocket/ajax.html">demo</a></p>
<pre class="blockcode"><code class="language-javascript">//创建一个ajax对象（想打电话，首先得有电话这个对象）
var XHR = null;
if (window.XMLHttpRequest) {
// 非IE内核
XHR = new XMLHttpRequest();
} else if (window.ActiveXObject) {
// IE内核,早期IE的版本写法不同
XHR = new ActiveXObject("Microsoft.XMLHTTP");
} else {
XHR = null;
}
if(XHR){
//建立连接（拨号）
XHR.open("GET", "ajaxServer.action");
//发送请求（说话）
XHR.send();
//获取响应（听到对方回应）
XHR.onreadystatechange = function () {
// readyState值说明
// 0,初始化,XHR对象已经创建,还未执行open
// 1,载入,已经调用open方法,但是还没发送请求
// 2,载入完成,请求已经发送完成
// 3,交互,可以接收到部分数据
// status值说明
// 200:成功
// 404:没有发现文件、查询或URl
// 500:服务器产生内部错误
if (XHR.readyState == 4 && XHR.status == 200) {
// 这里可以对返回的内容做处理
// 一般会返回JSON或XML数据格式
console.log(XHR.responseText);
// 主动释放,JS本身也会回收的
XHR = null;
}
};
}</code></pre>
<p>JQuery写法（so easy，妈妈再也不用担心我的学习啦）：</p>
<pre class="blockcode"><code class="language-javascript">$.ajax({
type:"post",
url:url,
async:true,
data:params,
dataType:"json",
success:function(res){
console.log(res);
},
error:function(jqXHQ){
alert("发生错误:"+jqXHQ.status);
}
});</code></pre>
<span id="OSC_h2_5"></span>
<h2> </h2>
<span id="OSC_h2_6"></span>
<h2>2、webSocket</h2>
<span id="OSC_h4_7"></span>
<h4>（1）实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端；</h4>
<span id="OSC_h4_8"></span>
<h4>（2）实时数据交互。</h4>
<p><img alt="134805_CzR8_2941696.png" height="286" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-70df7604891774726036aba0af5553cd.png" width="391"></p>
<pre class="blockcode"><code class="language-javascript">// Create WebSocket connection.
var socket = new WebSocket('ws://localhost:8080'); //创建一个webSocket实例
// Connection opened
socket.addEventListener('open', func |
|
转播
