xml地图|网站地图|网站标签 [设为首页] [加入收藏]

正规赌博十大app排名

当前位置:网上十大正规赌博平台 > 正规赌博十大app排名 > 刨根问底HTTP和WebSocket协议,如何调试Javascript

刨根问底HTTP和WebSocket协议,如何调试Javascript

来源:http://www.nb-machinery.com 作者:网上十大正规赌博平台 时间:2019-10-10 00:41

HTML5的Websocket(理论篇 I)

2017/10/28 · HTML5 · websocket

原文出处: 转转前端   

先请来TA的邻居:

http:无状态、基于tcp请求/响应模式的应用层协议 (A:哎呀,上次你请我吃饭了么? B:我想想, 上次请你吃了么)
tcp:面向连接、保证高可靠性(数据无丢失、数据无失序、数据无错误、数据无重复到达) 传输层协议。(看啊,大阅兵,如此规整有秩序)

为什么要引入Websocket:

RFC开篇介绍:本协议的目的是为了解决基于浏览器的程序需要拉取资源时必须发起多个HTTP请求和长时间的轮询的问题。

long poll(长轮询): 客户端发送一个request后,服务器拿到这个连接,如果有消息,才返回response给客户端。没有消息,就一直不返回response。之后客户端再次发送request, 重复上次的动作。

图片 1

从上可以看出,http协议的特点是服务器不能主动联系客户端,只能由客户端发起。它的被动性预示了在完成双向通信时需要不停的连接或连接一直打开,这就需要服务器快速的处理速度或高并发的能力,是非常消耗资源的。

这个时候,Websocket出现了。

Chrome控制台 如何调试Javascript

2015/01/12 · JavaScript · Chrome

原文出处: ctriphire   

上面的文章已经大致介绍了一下console对象具体有哪些方面以及基本的应用,下面简单介绍一下如何利用好chrome控制台这个神器好好调试javascript代码(这个才是我们真正能用到实处的地方)

1、先说一下源码定位

大家打开测试网页   看到页面右下方有一个推荐的图标吗?右击推荐图标,选择审查元素,打开谷歌控制台,如下图所示

图片 2

我们现在想知道votePost方法到底在哪?跟着我这样做,在Console面板里面输入votePost然后回车

图片 3

直接点击上图标红的链接,控制台将定位到Sources面板中,展示如下图所示

图片 4

大家看了上面这个图片之后估计头都要晕了吧,这么多js都整在一行,让人怎么看呀,不用担心,按下图操作即可(也就是点击中间面板左下方的Pretty print就行了)

图片 5

这时我们再回到Console面板时会惊奇的发现原来的链接后面的1现在变成91了(其实这里的数字1或者91就是代表votePost方法在源码中的行号 )现在看出Pretty print按钮的强大之处了吧

知道了怎么样查看某一个按钮的源码,那接下来的工作便是调试了,调试第一步需要做的便是设置断点,其实设置断点很简单,点击一下上图所示的92即可,这时你会发现92行号旁边会多了一个图标,这里解释一下为什么不在91处设置断点,你可以试下,事实上根本就没法在91处上设置断点,因为它是函数的定义处,所以没法在此设置断点。

图片 6

设置好了断点后,你就会在右边Breakpoints方框里看到刚刚设置的断点。

我们先来介绍一下用到的调试快捷键吧(事实上我们也可以不用下表所示的快捷键,直接点击上图所示右侧栏最上层的一排按钮来进行调试,具体用哪个按钮,把鼠标放到按钮上方一会就会显示它相应的提示)

 

快捷键 功能
F8 恢复运行
F10 步过,遇到自定义函数也当成一个语句执行,而不会进入函数内部
F11 步入,遇到自定义函数就跟入到函数内部
Shift F11 步出,跳出当前自定义函数

其中值得一提的是,当我们点击“推荐”按钮进行调试的时候会发现,不管我们是按的F10进行调试还是按F11进行逐步调试,都没法进行$.ajax函数内部,即使我们在函数内部设置了断点也没有办法进入,这里按F8才是真正起效果的,不信你试试。

当我们在调试的时候,右侧Scope Variables里面会显示当前作用域以及他的父级作用域,以及闭包。你不仅能在右侧 Scope Variables(变量作用域) 一栏处看到当前变量,而且还能把鼠标直接移到任意变量上,就可以查看该变量的值。

用图说话(哈哈)

图片 7

 

刚刚我们介绍的只是在html里面能够看得到它绑定了onclick事件,这样我们就找到它绑定的js函数,如果它是在jQuery页面加载完成函数里面绑定的,这时候我们怎么知道它绑定的是哪个js函数呢,如果我们不知道绑定的js函数就更加不用说调试进去了

下面介绍一下如何查看,还是以刚刚那个测试网页为例子吧,但是这次我们来看“提交评论”作说明吧,

右击“提交评论”–>审核元素,我们可以清楚的看到在这个按钮上未绑定任何事件。在Console面板内输入如下代码

JavaScript

function lookEvents (elem) { return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" ); } var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

1
2
3
4
function lookEvents (elem) {
    return $.data ? $.data( elem, "events", undefined, true ) : $._data( elem, "events" );
}
var event = lookEvents($("#btn_comment_submit")[0]); // 获取绑定的事件

如下图所示:

图片 8

按照上述介绍的方法定位到具体的blog-common.js里面,找到postComment  然后一层层的找到具体的代码,再设置断点就好了。

最后介绍一下一个神器,很好用的debugger

如果你自己写的代码,你执行的时候想让它在某一处停下来,只要写上的debugger就好了,不信你试试!哈哈

赞 1 收藏 评论

图片 9

消息体的长度

消息体长度的确定有一下几个规则,它们顺序执行:

  1. 所有不应该返回内容的Response消息都不应该带有任何的消息体,消息会在第一个空行就被认为是终止了。
  2. 如果消息头含有Transfer-Encoding,且它的值不是identity,那么消息体的长度会使用chunked方式解码来确定,直到连接终止。
  3. 如果消息头中有Content-Length,那么它就代表了entity-lengthtransfer-length。如果同时含有Transfer-Encoding,则entity-lengthtransfer-length可能不会相等,那么Content-Length会被忽略。
  4. 如果消息的媒体类型是multipart/byteranges,并且transfer-length也没有指定,那么传输长度由这个媒体自己定义。通常是收发双发定义好了格式, HTTP1.1客户端请求里如果出现Range头域并且带有多个字节范围(byte-range)指示符,这就意味着客户端能解析multipart/byteranges响应。
  5. 如果是Response消息,也可以由服务器来断开连接,作为消息体结束。

从消息体中得到实体主体,它的类型由两个header来定义,Content-TypeContent-Encoding(通常用来做压缩)。如果有实体主体,则必须有Content-Type,如果没有,接收方就需要猜测,猜不出来就是用application/octet-stream

Websocket是什么:

RFC中写到:WebSocket协议使在控制环境下运行不受信任代码的客户端和能够选择与那些代码通信的远程主机之间能够双向通信。

对,划重点:双向通信

Websocket在连接之后,客户端可以主动发送消息给服务器,服务器也可以主动向客户端推送消息。比如:预订车票信息,除了我们发请求询问车票如何,当然更希望如果有新消息,可以直接通知我们。

其特点:

(1)握手阶段采用 HTTP 协议,默认端口是80和443

(2)建立在TCP协议基础之上,和http协议同属于应用层

(4)可以发送文本,也可以发送二进制数据

(5)没有同源限制,客户端可以与任意服务器通信

(6)协议标识符是ws(如果加密,为wss),如ws://localhost:8023

简单来说,Websocket协议分为两部分:握手和数据传输。

图片 10

Response消息

响应消息跟请求消息几乎一模一样,定义如下:

JavaScript

Response = Status-Line *(( general-header | response-header | entity-header ) CRLF) CRLF [ message-body ]

1
2
3
4
5
6
   Response      = Status-Line              
                   *(( general-header        
                    | response-header      
                    | entity-header ) CRLF)  
                   CRLF
                   [ message-body ]

可以看到,除了header不使用request-header之外,只有第一行不同,响应消息的第一行是状态行,其中就包含大名鼎鼎的返回码

Status-Line的内容首先是协议的版本号,然后跟着返回码,最后是解释的内容,它们之间各有一个空格分隔,行的末尾以一个回车换行符作为结束。定义如下:

JavaScript

Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF

1
   Status-Line = HTTP-Version SP Status-Code SP Reason-Phrase CRLF

WebSocket 构造函数

通过调用WebSocket构造函数来创建一个WebSocket实例对象,建立客户端与服务器的连接。

JavaScript

const ws = new WebSocket('ws://localhost:8023');

1
const ws = new WebSocket('ws://localhost:8023');

待续

本来是打算在一篇文章里把HTTP和WebSocket两个协议的大致细节理出来,然后进行对比。可是写着写着就发现篇幅可能会比较长,读起来就不那么友好了,那么刚好就再写第二篇吧。第二篇里会将WebSocket的大致情况描述一下,然后和HTTP适用的场景进行对比。

 

2 赞 15 收藏 1 评论

图片 11

WebSocket 方法:

WebSocket 对象有两个方法:send 和 close

  • send:客户端和服务器建立连接后,可以调用send方法去发送消息。
JavaScript

//发送一个文本消息 ws.send("this is websocket");

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f447934b6d916593124-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b6d916593124-2">
2
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f447934b6d916593124-1" class="crayon-line">
//发送一个文本消息
</div>
<div id="crayon-5b8f447934b6d916593124-2" class="crayon-line crayon-striped-line">
ws.send(&quot;this is websocket&quot;);
</div>
</div></td>
</tr>
</tbody>
</table>

在open事件的回调中调用send()方法传送数据:

JavaScript

const ws = new WebSocket('ws://localhost:8023'); ws.onopen = e => { console.log('Connection success'); ws.send(`Hello ${e}`); };

1
2
3
4
5
const ws = new WebSocket('ws://localhost:8023');
ws.onopen = e => {
    console.log('Connection success');
    ws.send(`Hello ${e}`);
};

如果想通过响应其他事件发送消息,可通过判断当前的Websocket的readyState属性。接下来会说到readyState.

  • closeclose方法用来关闭连接。调用close方法后,将不能发送数据。close方法可以传入两个可选的参数,code 和reason, 以告诉服务端为什么终止连接。
JavaScript

ws.close(); //1000是状态码,代表正常结束。 ws.close(1000, "Closing
normally");

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f447934b73487491254-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b73487491254-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f447934b73487491254-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f447934b73487491254-4">
4
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f447934b73487491254-1" class="crayon-line">
ws.close();
</div>
<div id="crayon-5b8f447934b73487491254-2" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f447934b73487491254-3" class="crayon-line">
//1000是状态码,代表正常结束。
</div>
<div id="crayon-5b8f447934b73487491254-4" class="crayon-line crayon-striped-line">
ws.close(1000, &quot;Closing normally&quot;);
</div>
</div></td>
</tr>
</tbody>
</table>

HTTP

HTTP的地址格式如下:

JavaScript

http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]] 协议和host不分大小写

1
2
http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]
协议和host不分大小写

Websocket API:

这里是指客户端 API。

刨根问底HTTP和WebSocket协议

2016/08/17 · 基础技术 · 1 评论 · HTTP, websocket

原文出处: TheAlchemist   

图片 12

那天和boss聊天,不经意间提到了Meteor,然后聊到了WebSocket,然后就有了以下对话,不得不说,看问题的方式不同,看到的东西也会大不相同。
A:Meteor是一个很新的开发框架,我觉得它设计得十分巧妙。
B:怎么个巧妙之处?
A:它的前后端全部使用JS,做到了真正的前后端统一;前端浏览器里存有一份后台开放出来的数据库的拷贝,快;使用WebSocket协议来做数据传输协议,来同步前后端的数据库,实现了真正的实时同步。
B:哦?WebSocket是什么东西?真实时?那底层是不是还是轮训?和HTTP的长连接有什么不同?
A:(开始心虚)它是一个新的基于TCP的应用层协议,只需要一次连接,以后的数据不需要重新建立连接,可以直接发送,它是基于TCP的,属于和HTTP相同的地位(呃,开始胡诌了),底层不是轮训,和长连接的区别……这个就不清楚了。
B:它的传输过程大致是什么样子的呢?
A:首先握手连接(又是胡诌),好像可以基于HTTP建立连接(之前用过Socket.io,即兴胡诌),建立了连接之后就可以传输数据了,还包括断掉之后重连等机制。
B:看起来和HTTP长连接做的事情差不多嘛,好像就是一种基于HTTP和Socket的协议啊。
A:呃……(我还是回去看看书吧)

有时候看事情确实太流于表面,了解到了每个事物的大致轮廓,但不求甚解,和朋友聊天说出来也鲜有人会刨根问底,导致了很多基础知识并不牢靠,于是回来大致把HTTP和WebSocket协议的RFC文档(RFC2616 和 RFC6455),刚好对HTTP的传输过程一直有点模糊,这里把两个协议的异同总结一下。

本文由网上十大正规赌博平台发布于正规赌博十大app排名,转载请注明出处:刨根问底HTTP和WebSocket协议,如何调试Javascript

关键词: SG电子游戏