匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。HTML5 中websocket长连接的具体实现方法 - CSDN博客
HTML5 中websocket长连接的具体实现方法
&HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。
Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常
情况下，Socket用于描述IP地址和端口，是通信过程中的一个字符句柄。当服务器端又多个应用服务绑定一个Socket时，
通过通信中的字符句柄，实现不同端口对应不同应用服务功能。目前，大部分浏览器都支持HTML5中Socket API的运行。
WebSocket连接服务器和客户端，这个链接是一个实时的长连接，服务器端一旦与客户端建立了双向链接，
就可以将数据推送到Socket中，客户端只要有一个Socket绑定的地址和端口与服务器建立联系，就可以接收推送来的数据。
WebSocket API 的使用分为以下几个步骤：
步骤1、 创建连接，新建一个WebSocket对象十分的方便，代码如下：
var host = &ws://echo.websocket.org/&;
var socket=new WebSocket(host);
注意：其中，URL必须以“ws”字符开头，剩余部分可以使用像HTTP地址一样来编写。该地址没有使用
HTTP协议写法，因为它的属性为WebSocket URL;URL必须由4个部分组成，分别是通信标记（ws）、主机名称（host），端口号（port）
及WebSocket Server.
步骤2，发送数据。当WebSocket对象与服务器建立联系后，使用如下代码发送数据：
socket.send(dataInfo);
注意：其中，objWs为新创建的WebSocket对象，send()方法中的dataInfo参数为字符类型，即只能使用文本数据或者将JSON对象转换成文本内容的数据格式。
步骤3，接收数据。客户端添加事件机制接收服务器发送来的数据，代码如下：
socket.onmessage=function(event){
&&&&//弹出收到的信息
&&&&alert(event.data);
&&&&//其他代码
其中，通过回调函数中event对象的&data&属性来获取服务器端发送的数据内容，该内容可以是一个字符串或者JSON对象。
步骤4 状态标志。通过WebSocket对象的“readyState”属性记录连接过程中的状态值。
&readyState&属性是一个连接的状态标志，用于获取WebSocket对象在连接，打开，变比中和关闭时的状态。该状态标志共有4中属性值，如下表所示：
————————————————————————————————————
&&&&属性值&&&&&&&&属性常量&&&&&&&&描述
————————————————————————————————————
&&&&0&&&&&&&&CONNECTING&&&&&&&&连接尚未建立
&&&&&&&&1&&&&&&&&OPEN&&&&&&&&&&&&WebSocket的链接已经建立
&&&&2&&&&&&&&CLOSING&&&&&&&&&&&&连接正在关闭
&&&&3&&&&&&&&CLOSED&&&&&&&&&&&&连接已经关闭或不可用
————————————————————————————————————
WebSocket对象在连接过程中，通过侦测这个状态标志的变化，可以获取服务器端与客户端连接的状态，并将连接状态已状态码形式返回给客户端。
步骤5 关闭socket连接。
socket.close();
————————————————————————————————————————————————————————————————
在实际应用中，socket服务器端的代码可以是Python，node.js,java,php。在这里我可以使用网站提供的，socket
服务端。协议地址为：ws://echo.websocket.org/
完整代码如下：
————————————————————————————————————————————————————————————————
&title&Jack张WebSocket实例&/title&
html,body{font:normal 14margin:0}
#log {width:440&
&&&&&&&&&&&&height:270&
&&&&&&&&&&&&text-align:
&&&&&&&&&&&&overflow:margin:0
&&&&&&&&&&&&font-weight:color:#F8F8F8;
&&&&&&&&&&&&}
#msg {width:330margin:0}
&&&&background-image: url(images/images.jpg);
&&&&background-repeat: no-
&&&&background-position:
&&&&height:643
&&&&overflow:
&&&&text-align:
&&&&padding-top:120
//声明一个socket
//初始化方法
function init(){
&&var host = &ws://echo.websocket.org/&;//声明host注意：是ws协议
&&&&socket = new WebSocket(host);//新创建一个socket对象
&&&&log('WebSocket - status '+socket.readyState);//将连接的状态信息显示在log
&&&&socket.onopen&&&&= function(msg){ log(&Welcome - status &+this.readyState);
};//监听打开连接
&&&&socket.onmessage = function(msg){ log(&Received: &+msg.data); };//监听当接收信息时触发匿名函数
&&&&socket.onclose&& = function(msg){ log(&Disconnected - status &+this.readyState);
};//关闭连接
&&catch(ex){ log(ex); }
&&$(&msg&).focus();
//声明一个发送信息方法
function send(){
&&var txt,
&&txt = $(&msg&);
&&msg = txt.
&&if(!msg){ alert(&Message can not be empty&); }
&&txt.value=&&;
&&txt.focus();
&&try{ socket.send(msg); log('Sent: '+msg); } catch(ex){ log(ex); }
//声明一个对开连接，关闭socket方法
function quit(){
&&log(&Goodbye!&);
&&socket.close();
// 根据id获取DOM元素
function $(id){ return document.getElementById(id); }
//将信息显示在id为log的div中
function log(msg){ $(&log&).innerHTML+=&&br&&+ }
//键盘事件（回车）
function onkey(event){ if(event.keyCode==13){ send(); } }
&body onload=&init()&&
&div id=&imagebg&&
&&&&&div style=&width:520text-align:margin:0color:#000;&&
&a href=&/jackyo&&&strong&新浪微博：Jack张&/strong& &/div&
&&&& &div id=&log&&&/div&
&&&& &input id=&msg& type=&textbox& onkeypress=&onkey(event)&/&
&&&& &button onclick=&send()&&发送&/button&
&&&& &button onclick=&quit()&&断开&/button&
本文已收录于以下专栏：
相关文章推荐
原文链接：/http-connection-and-websocket.html
对这四个概念不太清楚，今天专门搜索了解一下，总结一下：
长连接：...
HTML5中通过调用与数据通信相关的Web Socket API,实现从服务器中推送信息到客户端。
Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常情况...
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗...
WebSocket原理及技术简介
WebSocket技术及协议
WebSocket API
HTTP协议与TCP/IP协议的关系HTTP的长连接和短连接本质上是TCP长连接和短连接。HTTP属于应用层协议，在传输层使用TCP协议，在网络层使用IP协议。IP协议主要解决网络路由和寻址问题，TC...
HTML5中通过调用与数据通信相关的Web Socket
API,实现从服务器中推送信息到客户端。
Socket又称为套接字，是基于W3C标准开发在一个TCP接口中进行双向通信的技术。通常
socket基本概念两个进程如果需要进行通讯最基本的前提是能够唯一的标示一个进程，在本地通讯中用PID来唯一标示一个进程，但PID只在本地唯一，网络中的两个进程PID冲突几率很大。我们知道IP层的ip...
1.两种方式，一种使用tomcat的websocket实现，一种使用spring的websocket
2.tomcat的方式需要tomcat 7.x，JEE7的支持。
3.spring...
websocket的两个属性：readyState和bufferedAmount。
根据readyState属性可以判断webSocket的连接状态，该属性的值可以是下面几种：
他的最新文章
讲师：钟钦成
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)vue keep-alive 数据更新问题 - CSDN博客
vue keep-alive 数据更新问题
在项目中使用&keep-alive&包含&router-view&实现页面缓存，加速页面加载，
同时，这种方式带来一些弊端，请看如下大神解释：
****************************************************************************
当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-&
mounted-& activated，退出时触发deactivated。
当再次进入（前进或者后退）时，只触发activated。
****************************************************************************
这就带来一个问题，之前在项目中使用mounted在页面加载时获取数据，使用&keep-alive&后方法不再生效，
根据上面的解释，将mounted替换为activated即可。
关于keep-alive的介绍，请看大神博客：
/p/f9e?nomobile=yes&
本文已收录于以下专栏：
相关文章推荐
当我们使用vue的时候有时候我们想使用keep-alive来将页面缓存下来，但时候有时候我们本身业务不能全部缓存怎么解决这个问题呢？
我们可以使用activeted
1.基本用法
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗
keep-alive>
component>
component>
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干...
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了 keep-alive 的功能，所以就试用了下。当然，干...
keyword:'',
deactivated() {
console.log('deactivated');
vue 在路由切换时，我们有时候不希望重新渲染界面，这时候就需要使用keep-alive，来将组件缓存
vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗...
WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁，它和 HTTP 有一些共性，是为了解决 HTTP 本身无法解决的某些问题而做出的一个改良设计。在以前 HTTP 协议中所谓的 ...
TCP keep-alive的三个参数用man命令，可以查看linux的tcp的参数：man 7 tcp其中keep-alive相关的参数有三个：
tcp_keepalive_intvl ...
看到有人问Connection: close和Connection: keep-alive有什么区别？想起以前学习到的一篇文章，今天转载来，大家看看，我也再温故知新下。如果有问题补充的在下面可以扩充下...
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何...
他的最新文章
讲师：钟钦成
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)html5实现websocket 长连接&&categories:&&author:来源：互联网http://blog.csdn.net/fenglibing/article/details/71089821）、WebSocket介绍 HTML5 Web Sockets规范定义了Web Sockets API，支持页面使用Web Socket协议与远程主机进行全双工的通信。它引入了WebSocket接口并且定义了一个全双工的通信通道，通过一个单一的套接字在Web上进行操作。HTML5 Web Sockets以最小的开销高效地提供了Web连接。相较于经常需要使用推送实时数据到客户端甚至通过维护两个HTTP连接来模拟全双工连接的旧的轮询或长轮询（Comet）来说，这就极大的减少了不必要的网络流量与延迟。 要使用HTML5 Web Sockets从一个Web客户端连接到一个远程端点，你要创建一个新的WebSocket实例并为之提供一个URL来表示你想要连接到的远程端点。该规范定义了ws://以及wss://模式来分别表示WebSocket和安全WebSocket连接。一个WebSocket连接是在客户端与服务器之间HTTP协议的初始握手阶段将其升级到Web Socket协议来建立的，其底层仍是TCP/IP连接。 WebSocket Hybi草案12的地址：http://tools.ietf.org/html/draft-ietf-hybi-thewebsocketprotocol-12，可以以此为入口访问其它的草案。 2）、优点 a）、服务器与客户端之间交换的标头信息很小，大概只有2字节； b）、客户端与服务器都可以主动传送数据给对方； c）、不用频率创建TCP请求及销毁请求，减少网络带宽资源的占用，同时也节省服务器资源； 3）、WebSocket数据帧的介绍 a）、草案版本00到草案版本05之间，详细可以查看草案文档，解码编码可以看见Netty的WebSocketFrameDecoder和WebSocketFrameEncoder实现； b）、草案版本06到现在最新的草案17，介绍参见文章：http://blog.csdn.net/fenglibing/article/details/6852497 4）、WebSocket不同版本的几种握手方式 a）、无安全key、最老的WebSocket握手协议的实现（Flash）； b）、带两个安全key请求头的后端握手实现； c）、带一个安全key请求头的后端握手实现； 参见：http://blog.csdn.net/fenglibing/article/details/）、WebSocket可以穿越防火墙吗？ WebSocket使用标准的80及443端口，这两个都是防火墙友好协议，Web Sockets使用HTTP Upgrade机制升级到Web Socket协议。HTML5 Web Sockets有着兼容HTTP的握手机制，因此HTTP服务器可以与WebSocket服务器共享默认的HTTP与HTTPS端（80和443）。 6）、Web Sockets与代理服务器交互 代理服务器的问题： a）、HTTP代理服务器可能会选择关闭流或闲置的WebSocket连接，因为它们看起好像是尝试连接一个没有回应的HTTP服务器； b）、代理服务器可能会缓冲未加密的HTTP响应，这将会对HTTP响应流带来不可估计的延迟； c）、未加密的WebSocket连接(ws://开头的请求)服务器时，如果中间存在透明代理服务器，连接可能会失败，或者发送消息会失败；而加密的WebSocket连接在存在透明代理服务器的情况下成功的机率会比较大；近期文章
分类目录选择分类目录书路&&(10)儿童画&&(121)&&&儿童作品&&(82)&&&儿童画教程&&(24)原创&&(127)&&&0基础编程&&(23)&&&android&&(9)&&&hadoop&&(18)&&&java原创&&(2)&&&livewriter&&(11)&&&nginx&&(52)资料&&(1,043)&&&android资料&&(83)&&&java资料&&(74)&&&linux资料&&(36)&&&mq&&(24)&&&mysql资料&&(34)&&&nginx资料&&(17)&&&svn&&(9)&&&wordpress&&(48)&&&搜索资料&&(45) 文章归档 选择月份 2017年九月 &(2) 2017年八月 &(1) 2017年七月 &(14) 2017年六月 &(23) 2017年五月 &(35) 2017年四月 &(38) 2017年三月 &(20) 2017年二月 &(5) 2017年一月 &(9) 2016年十二月 &(8) 2016年十一月 &(1) 2016年十月 &(10) 2016年九月 &(5) 2016年八月 &(8) 2016年七月 &(6) 2016年六月 &(9) 2016年五月 &(14) 2016年四月 &(6) 2016年三月 &(21) 2016年二月 &(11) 2016年一月 &(15) 2015年十二月 &(18) 2015年十一月 &(14) 2015年十月 &(6) 2015年九月 &(6) 2015年八月 &(7) 2015年七月 &(11) 2015年六月 &(19) 2015年五月 &(27) 2015年四月 &(19) 2015年三月 &(35) 2015年二月 &(38) 2015年一月 &(20) 2014年十二月 &(8) 2014年十一月 &(8) 2014年十月 &(3) 2014年九月 &(3) 2014年八月 &(3) 2014年七月 &(4) 2014年六月 &(3) 2014年五月 &(7) 2014年四月 &(9) 2014年三月 &(8) 2014年二月 &(8) 2014年一月 &(11) 2013年十二月 &(11) 2013年十一月 &(9) 2013年十月 &(40) 2013年九月 &(79) 2013年八月 &(50) 2013年七月 &(68) 2013年六月 &(50) 2013年五月 &(59) 2013年四月 &(65) 2013年三月 &(59) 2013年二月 &(20) 2013年一月 &(59) 2012年十二月 &(52) 2012年十一月 &(91) 2012年十月 &(23)keep-alive和websocket有什么区别 - CSDN博客
keep-alive和websocket有什么区别
WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁，它和 HTTP 有一些共性，是为了解决 HTTP 本身无法解决的某些问题而做出的一个改良设计。在以前 HTTP 协议中所谓的 keep-alive connection 是指在一次 TCP 连接中完成多个 HTTP 请求，但是对每个请求仍然要单独发 header；所谓的 polling 是指从客户端（一般就是浏览器）不断主动的向服务器发 HTTP 请求查询是否有新数据。这两种模式有一个共同的缺点，就是除了真正的数据部分外，服务器和客户端还要大量交换
HTTP header，信息交换效率很低。它们建立的“长连接”都是伪.长连接，只不过好处是不需要对现有的 HTTP server 和浏览器架构做修改就能实现。
WebSocket 解决的第一个问题是，通过第一个 HTTP request 建立了 TCP 连接之后，之后的交换数据都不需要再发 HTTP request了，使得这个长连接变成了一个真.长连接。但是不需要发送 HTTP header就能交换数据显然和原有的 HTTP 协议是有区别的，所以它需要对服务器和客户端都进行升级才能实现。在此基础上 WebSocket 还是一个双通道的连接，在同一个 TCP 连接上既可以发也可以收信息。此外还有 multiplexing 功能，几个不同的 URI 可以复用同一个 WebSocket
连接。这些都是原来的 HTTP 不能做到的。
keep-alive 只是一种为了达到复用tcp连接的“协商”行为，双方并没有建立正真的连接会话，服务端也可以不认可，也可以随时（在任何一次请求完成后）关闭掉。WebSocket 不同，它本身就规定了是正真的、双工的长连接，两边都必须要维持住连接的状态。
另外，http协议决定了浏览器端总是主动发起方，http的服务端总是被动的接受、响应请求，从不主动。而WebSocket协议，在连接之后，客户端、服务端是完全平等的，不存在主动、被动之说。
本文已收录于以下专栏：
相关文章推荐
1、HTTP Keep-Alive
在http早期，每个http请求都要求打开一个tpc socket连接，并且使用一次之后就断开这个tcp连接。
使用keep-alive可以改善这种状态，即在一次T...
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗...
在项目中使用keep-alive>包含router-view>实现页面缓存，加速页面加载，
同时，这种方式带来一些弊端，请看如下大神解释：
****************************...
TCP keep-alive的三个参数用man命令，可以查看linux的tcp的参数：man 7 tcp其中keep-alive相关的参数有三个：
tcp_keepalive_intvl ...
看到有人问Connection: close和Connection: keep-alive有什么区别？想起以前学习到的一篇文章，今天转载来，大家看看，我也再温故知新下。如果有问题补充的在下面可以扩充下...
TCP的keep-alive可以在不增加服务器处理逻辑的前提下，检测客户端连接是否中断/proc/sys/net/ipv4/tcp_keepalive_time
开始首次KeepAlive探测前的...
Chapter: 关于HTTP Keep-Alive
Keep-Alive是什么？如何工作？
2. 了解HTTP
Keep-Alive的基本情况
3. Apach...
Chapter: 关于HTTP Keep-Alive
Keep-Alive是什么？如何工作？
2. 了解HTTP
Keep-Alive的基本情况
3. Apach...
WebSocket与http协议一样都是基于TCP的，所以他们都是可靠的协议，Web开发者调用的WebSocket的send函数在browser的实现中最终都是通过TCP的系统接口进行传输的。WebS...
看到有人问Connection:
close和Connection: keep-alive有什么区别？想起以前学习到的一篇文章，今天转载来，大家看看，我也再温故知新下。如果有问题补充的在下面可以扩...
他的最新文章
讲师：钟钦成
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}