webSocket与ajax、webSocket API、webSocket原理、socket io、聊天室

论坛 期权论坛     
选择匿名的用户   2021-6-2 15:49   155   0
<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%的码农都做不了架构师?&gt;&gt;&gt; </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 &#61; null;  
if (window.XMLHttpRequest) {  
    // 非IE内核  
    XHR &#61; new XMLHttpRequest();  
} else if (window.ActiveXObject) {  
    // IE内核,早期IE的版本写法不同
    XHR &#61; new ActiveXObject(&#34;Microsoft.XMLHTTP&#34;);  
} else {  
    XHR &#61; null;  
}  
  
if(XHR){  
    //建立连接(拨号)
    XHR.open(&#34;GET&#34;, &#34;ajaxServer.action&#34;);  

    //发送请求(说话)
    XHR.send();  
   
    //获取响应(听到对方回应)
    XHR.onreadystatechange &#61; function () {  
        // readyState值说明  
        // 0,初始化,XHR对象已经创建,还未执行open  
        // 1,载入,已经调用open方法,但是还没发送请求  
        // 2,载入完成,请求已经发送完成  
        // 3,交互,可以接收到部分数据  
  
        // status值说明  
        // 200:成功  
        // 404:没有发现文件、查询或URl  
        // 500:服务器产生内部错误  
        if (XHR.readyState &#61;&#61; 4 &amp;&amp; XHR.status &#61;&#61; 200) {  
            // 这里可以对返回的内容做处理  
            // 一般会返回JSON或XML数据格式  
            console.log(XHR.responseText);  
            // 主动释放,JS本身也会回收的  
            XHR &#61; null;  
        }  
    };  
}</code></pre>
<p>JQuery写法(so easy,妈妈再也不用担心我的学习啦):</p>
<pre class="blockcode"><code class="language-javascript">$.ajax({
    type:&#34;post&#34;,
    url:url,
    async:true,
    data:params,
    dataType:&#34;json&#34;,
    success:function(res){
        console.log(res);
    },
    error:function(jqXHQ){
        alert(&#34;发生错误:&#34;&#43;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 &#61; new WebSocket(&#39;ws://localhost:8080&#39;);    //创建一个webSocket实例

// Connection opened
socket.addEventListener(&#39;open&#39;, func
分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP