做网站网站代理,中国搜索,数棋网站建设,网络课程设计开发1、前言 HTML5规范在传统的web交互基础上为我们带来了众多的新特性#xff0c;随着web技术被广泛用于web APP的开发#xff0c;这些新特性得以推广和使用#xff0c;而websocket作为一种新的web通信技术具有巨大意义。 本文将带您认识WebSocket。也可查看本文的下篇#x… 1、前言 HTML5规范在传统的web交互基础上为我们带来了众多的新特性随着web技术被广泛用于web APP的开发这些新特性得以推广和使用而websocket作为一种新的web通信技术具有巨大意义。 本文将带您认识WebSocket。也可查看本文的下篇《WebSocket详解二技术原理、代码演示和应用案例》。 2、系列文章 本文是系列文章中的第1篇本系列文章的大纲如下 《WebSocket详解一初步认识WebSocket技术》本文《WebSocket详解二技术原理、代码演示和应用案例》《WebSocket详解三深入WebSocket通信协议细节》《WebSocket详解四刨根问底HTTP与WebSocket的关系(上篇)》《WebSocket详解五刨根问底HTTP与WebSocket的关系(下篇)》《WebSocket详解六刨根问底WebSocket与Socket的关系》 3、更多资料 Web端即时通讯新手入门贴 《新手入门贴详解Web端即时通讯技术的原理》Web端即时通讯技术盘点请参见 《Web端即时通讯技术盘点短轮询、Comet、Websocket、SSE》关于Ajax短轮询 找这方面的资料没什么意义除非忽悠客户否则请考虑其它3种方案即可。有关Comet技术的详细介绍请参见 《Comet技术详解基于HTTP长连接的Web端实时通信技术》 《WEB端即时通讯HTTP长连接、长轮询long polling详解》 《WEB端即时通讯不用WebSocket也一样能搞定消息的即时性》 《开源Comet服务器iComet支持百万并发的Web端即时通讯方案》更多WebSocket的详细介绍请参见 《WebSocket从入门到精通半小时就够》 《新手快速入门WebSocket简明教程》 《理论联系实际从零理解WebSocket的通信原理、协议格式、安全性》 《八问WebSocket协议为你快速解答WebSocket热门疑问》 《Socket.IO介绍支持WebSocket、用于WEB端的即时通讯的框架》 《socket.io和websocket 之间是什么关系有什么区别》 《Web端即时通讯实践干货如何让你的WebSocket断网重连更快速》有关SSE的详细介绍文章请参见 《SSE技术详解一种全新的HTML5服务器推送事件技术》更多WEB端即时通讯文章请见http://www.52im.net/forum.php?modcollectionactionviewctid15 4、什么是Socket什么是WebSocket 对于第1次听说WebSocket技术的人来说两者有什么区别websocket是仅仅将socket的概念移植到浏览器中的实现吗 我们知道在网络中的两个应用程序进程需要全双工相互通信全双工即双方可同时向对方发送消息需要用到的就是socket它能够提供端对端通信对于程序员来讲他只需要在某个应用程序的一端暂且称之为客户端创建一个socket实例并且提供它所要连接一端暂且称之为服务端的IP地址和端口而另外一端服务端创建另一个socket并绑定本地端口进行监听然后客户端进行连接服务端服务端接受连接之后双方建立了一个端对端的TCP连接在该连接上就可以双向通讯了而且一旦建立这个连接之后通信双方就没有客户端服务端之分了提供的就是端对端通信了。我们可以采取这种方式构建一个桌面版的im程序让不同主机上的用户发送消息。从本质上来说socket并不是一个新的协议它只是为了便于程序员进行网络编程而对tcp/ip协议族通信机制的一种封装。 websocket是html5规范中的一个部分它借鉴了socket这种思想为web应用程序客户端和服务端之间注意是客户端服务端提供了一种全双工通信机制。同时它又是一种新的应用层协议websocket协议是为了提供web应用程序和服务端全双工通信而专门制定的一种应用层协议通常它表示为ws://echo.websocket.org/?encodingtext HTTP/1.1可以看到除了前面的协议名和http不同之外它的表示地址就是传统的url地址。 可以看到websocket并不是简单地将socket这一概念在浏览器环境中的移植本文最后也会通过一个小的demo来进一步讲述socket和websocket在使用上的区别。 5、WebSocket的通信原理和机制 既然是基于浏览器端的web技术那么它的通信肯定少不了http,websocket本身虽然也是一种新的应用层协议但是它也不能够脱离http而单独存在。具体来讲我们在客户端构建一个websocket实例并且为它绑定一个需要连接到的服务器地址当客户端连接服务端的时候会向服务端发送一个类似下面的http报文 可以看到这是一个http get请求报文注意该报文中有一个upgrade首部它的作用是告诉服务端需要将通信协议切换到websocket,如果服务端支持websocket协议那么它就会将自己的通信协议切换到websocket,同时发给客户端类似于以下的一个响应报文头 返回的状态码为101表示同意客户端协议转换请求并将它转换为websocket协议。以上过程都是利用http通信完成的称之为websocket协议握手(websocket Protocol handshake)进过这握手之后客户端和服务端就建立了websocket连接以后的通信走的都是websocket协议了。所以总结为websocket握手需要借助于http协议建立连接后通信过程使用websocket协议。同时需要了解的是该websocket连接还是基于我们刚才发起http连接的那个TCP连接。一旦建立连接之后我们就可以进行数据传输了websocket提供两种数据传输文本数据和二进制数据。 基于以上分析我们可以看到websocket能够提供低延迟高性能的客户端与服务端的双向数据通信。它颠覆了之前web开发的请求处理响应模式并且提供了一种真正意义上的客户端请求服务器推送数据的模式特别适合实时数据交互应用开发。 6、WebSocket技术出现之前Web端实现即时通讯的方法有哪些 6.1定期轮询的方式 客户端按照某个时间间隔不断地向服务端发送请求请求服务端的最新数据然后更新客户端显示。这种方式实际上浪费了大量流量并且对服务端造成了很大压力。 6.2SSEServer-Sent Event服务端推送事件 SSEServer-Sent Event服务端推送事件是一种允许服务端向客户端推送新数据的HTML5技术。与由客户端每隔几秒从服务端轮询拉取新数据相比这是一种更优的解决方案。 相较于WebSocket它也能从服务端向客户端推送数据。WebSocket能做的SSE也能做反之亦然但在完成某些任务方面它们各有千秋。关于SSE的介绍即时通讯网将在稍后的文章中详细介绍。 6.3Comet技术 Comet并不是一种新的通信技术它是在客户端请求服务端这个模式上的一种hack技术通常来讲它主要分为以下两种做法1基于长轮询的服务端推送技术 具体来讲就是客户端首先给服务端发送一个请求服务端收到该请求之后如果数据没有更新则并不立即返回服务端阻塞请求的返回直到数据发生了更新或者发生了连接超时服务端返回数据之后客户端再次发送同样的请求如下所示2基于流式数据传输的长连接 通常的做法是在页面中嵌入一个隐藏的iframe,然后让这个iframe的src属性指向我们请求的一个服务端地址并且为了数据更新我们将页面上数据更新操作封装为一个js函数将函数名当做参数传递到这个地址当中。 服务端收到请求后解析地址取出参数客户端js函数调用名每当有数据更新的时候返回对客户端函数的调用并且将要跟新的数据以js函数的参数填入到返回内容当中例如返回“script typetext/javascriptupdate(data)/script”这样一个字符串意味着以data为参数调用客户端update函数进行客户端view更新。基本模型如下所示 可以看到comet技术是针对客户端请求服务器响应模型而模拟出的一个服务端推送数据实时更新技术。而且由于浏览器兼容性不能够广泛应用。 6.4小结 当然并不是说这些技术没有用就算websocket已经作为规范被提出并实现但是对于老式浏览器我们依然需要将它降级为以上方式来实现实时交互和服务端数据推送。 7、一个简单的WebSocket聊天小例子 到此为止我们明白了websocket的原理下面通过一个简单的聊天应用来再次加深下对websocket的理解。该应用需求很简单就是在web选项卡中打开两个网页模拟两个web客户端实现聊天功能。 7.1客户端代码 client.html 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 !DOCTYPE html html head langen meta charsetUTF-8 title/title style *{ margin: 0; padding: 0; } .message{ width: 60%; margin: 0 10px; display: inline-block; text-align: center; height: 40px; line-height: 40px; font-size: 20px; border-radius: 5px; border: 1px solid #B3D33F; } .form{ width:100%; position: fixed; bottom: 300px; left: 0; } .connect{ height: 40px; vertical-align: top; /* padding: 0; */ width: 80px; font-size: 20px; border-radius: 5px; border: none; background: #B3D33F; color: #fff; } /style /head body ul idcontent/ul form classform input typetext placeholder请输入发送的消息 classmessage idmessage/ input typebutton value发送 idsend classconnect/ input typebutton value连接 idconnect classconnect/ /form script/script /body /html 客户端js代码 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var oUldocument.getElementById(content); var oConnectdocument.getElementById(connect); var oSenddocument.getElementById(send); var oInputdocument.getElementById(message); var wsnull; oConnect.onclickfunction(){ wsnew WebSocket(ws://localhost:5000); ws.onopenfunction(){ oUl.innerHTMLli客户端已连接/li; } ws.onmessagefunction(evt){ oUl.innerHTMLlievt.data/li; } ws.onclosefunction(){ oUl.innerHTMLli客户端已断开连接/li; }; ws.onerrorfunction(evt){ oUl.innerHTMLlievt.data/li; }; }; oSend.onclickfunction(){ if(ws){ ws.send(oInput.value); } } 这里使用的是w3c规范中关于HTML5 websocket API的原生API这些api很简单就是利用new WebSocket创建一个指定连接服务端地址的ws实例然后为该实例注册onopen(连接服务端),onmessage(接受服务端数据)onclose(关闭连接)以及ws.send(建立连接后)发送请求。上面说了那么多事实上可以看到html5 websocket API本身是很简单的一个对象和它的几个方法而已。 7.2服务端代码 服务端采用Node.js这里需要基于一个nodejs-websocket的Node.js服务端的库它是一个轻量级的Node.js websocket server端的实现实际上也是使用Node.js提供的net模块写成的。server.js 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 var apprequire(http).createServer(handler); var wsrequire(nodejs-websocket); var fsrequire(fs); app.listen(80); function handler(req,res){ fs.readFile(__dirname/client.html,function(err,data){ if(err){ res.writeHead(500); return res.end(error ); } res.writeHead(200); res.end(data); }); } var serverws.createServer(function(conn){ console.log(new conneciton); conn.on(text,function(str){ broadcast(server,str); }); conn.on(close,function(code,reason){ console.log(connection closed); }) }).listen(5000); function broadcast(server, msg) { server.connections.forEach(function (conn) { conn.sendText(msg); }) } 首先利用http模块监听用户的http请求并显示client.html界面然后创建一个websocket服务端等待用户连接在接收到用户发送来的数据之后将它广播到所有连接到的客户端。 7.3运行 下面我们打开两个浏览器选项卡模拟两个客户端进行连接。客户端一发起连接客户端一请求响应报文如下 可以看到这次握手和我们之前讲的如出一辙。客户端二的连接过程和1是一样的这里为了查看我们使用ff浏览器两个客户端的连接情况如下发送消息情况如下 可以看到双方发送的消息被服务端广播给了每个和自己连接的客户端。 8、结语 从上面的即时通讯聊天例子我们可以看到要想做一个点对点的im应用websocket采取的方式是让所有客户端连接服务端服务器将不同客户端发送给自己的消息进行转发或者广播而对于原始的socket只要两端建立连接之后就可以发送端对端的数据不需要经过第三方的转发即时通讯网注原文作者指的是原生的Socket可以通过P2P直接进行消息交互实际现今主流的IM应用几乎都是使用服务端中转的方式进行文本类消息的发送使用中转无关技术主要是基于运营考虑这也是websocket不同于socket的一个重要特点。 最后本文为了说明html5规范中的websocket在客户端采用了websocket原生的API实际开发中有比较著名的两个库socket.io和sockjs它们都对原始的websocket API做了进一步封装提供了更多功能都分为客户端和服务端的实现实际应用中可以选择使用。 如果您觉得本文还是显得有点专业可以看看知乎上的这篇《WebSocket 是什么原理为什么可以实现持久连接》比较通俗适合快餐式地了解WebSocket。 附录全站即时通讯技术资料分类 [1] 网络编程基础资料 《TCP/IP详解 - 第11章·UDP用户数据报协议》 《TCP/IP详解 - 第17章·TCP传输控制协议》 《TCP/IP详解 - 第18章·TCP连接的建立与终止》 《TCP/IP详解 - 第21章·TCP的超时与重传》 《理论经典TCP协议的3次握手与4次挥手过程详解》 《理论联系实际Wireshark抓包分析TCP 3次握手、4次挥手过程》 《计算机网络通讯协议关系图中文珍藏版》 《NAT详解基本原理、穿越技术(P2P打洞)、端口老化等》 《UDP中一个包的大小最大能多大》 《Java新一代网络编程模型AIO原理及Linux系统AIO介绍》 《NIO框架入门(三)iOS与MINA2、Netty4的跨平台UDP双向通信实战》 《NIO框架入门(四)Android与MINA2、Netty4的跨平台UDP双向通信实战》 更多同类文章 ……[2] 有关IM/推送的通信格式、协议的选择 《为什么QQ用的是UDP协议而不是TCP协议》 《移动端即时通讯协议选择UDP还是TCP》 《如何选择即时通讯应用的数据传输格式》 《强列建议将Protobuf作为你的即时通讯应用数据传输格式》 《移动端IM开发需要面对的技术问题含通信协议选择》 《简述移动端IM开发的那些坑架构设计、通信协议和客户端》 《理论联系实际一套典型的IM通信协议设计详解》 《58到家实时消息系统的协议设计等技术实践分享》 更多同类文章 ……[3] 有关IM/推送的心跳保活处理 《Android进程保活详解一篇文章解决你的所有疑问》 《Android端消息推送总结实现原理、心跳保活、遇到的问题等》 《为何基于TCP协议的移动端IM仍然需要心跳保活机制》 《微信团队原创分享Android版微信后台保活实战分享(进程保活篇)》 《微信团队原创分享Android版微信后台保活实战分享(网络保活篇)》 《移动端IM实践实现Android版微信的智能心跳机制》 《移动端IM实践WhatsApp、Line、微信的心跳策略分析》 更多同类文章 ……[4] 有关WEB端即时通讯开发 《新手入门贴史上最全Web端即时通讯技术原理详解》 《Web端即时通讯技术盘点短轮询、Comet、Websocket、SSE》 《SSE技术详解一种全新的HTML5服务器推送事件技术》 《Comet技术详解基于HTTP长连接的Web端实时通信技术》 《WebSocket详解一初步认识WebSocket技术》 《socket.io实现消息推送的一点实践及思路》 更多同类文章 ……[5] 有关IM架构设计 《浅谈IM系统的架构设计》 《简述移动端IM开发的那些坑架构设计、通信协议和客户端》 《一套原创分布式即时通讯(IM)系统理论架构方案》 《从零到卓越京东客服即时通讯系统的技术架构演进历程》 《蘑菇街即时通讯/IM服务器开发之架构选择》 《腾讯QQ1.4亿在线用户的技术挑战和架构演进之路PPT》 《微信技术总监谈架构微信之道——大道至简(演讲全文)》 《如何解读《微信技术总监谈架构微信之道——大道至简》》 《快速裂变见证微信强大后台架构从0到1的演进历程一》 《17年的实践腾讯海量产品的技术方法论》 更多同类文章 ……[6] 有关IM安全的文章 《即时通讯安全篇一正确地理解和使用Android端加密算法》 《即时通讯安全篇二探讨组合加密算法在IM中的应用》 《即时通讯安全篇三常用加解密算法与通讯安全讲解》 《即时通讯安全篇四实例分析Android中密钥硬编码的风险》 《传输层安全协议SSL/TLS的Java平台实现简介和Demo演示》 《理论联系实际一套典型的IM通信协议设计详解含安全层设计》 《微信新一代通信安全解决方案基于TLS1.3的MMTLS详解》 《来自阿里OpenIM打造安全可靠即时通讯服务的技术实践分享》 更多同类文章 ……[7] 有关实时音视频开发 《即时通讯音视频开发一视频编解码之理论概述》 《即时通讯音视频开发二视频编解码之数字视频介绍》 《即时通讯音视频开发三视频编解码之编码基础》 《即时通讯音视频开发四视频编解码之预测技术介绍》 《即时通讯音视频开发五认识主流视频编码技术H.264》 《即时通讯音视频开发六如何开始音频编解码技术的学习》 《即时通讯音视频开发七音频基础及编码原理入门》 《即时通讯音视频开发八常见的实时语音通讯编码标准》 《即时通讯音视频开发九实时语音通讯的回音及回音消除概述》 《即时通讯音视频开发十实时语音通讯的回音消除技术详解》 《即时通讯音视频开发十一实时语音通讯丢包补偿技术详解》 《即时通讯音视频开发十二多人实时音视频聊天架构探讨》 《即时通讯音视频开发十三实时视频编码H.264的特点与优势》 《即时通讯音视频开发十四实时音视频数据传输协议介绍》 《即时通讯音视频开发十五聊聊P2P与实时音视频的应用情况》 《即时通讯音视频开发十六移动端实时音视频开发的几个建议》 《即时通讯音视频开发十七视频编码H.264、V8的前世今生》 《简述开源实时音视频技术WebRTC的优缺点》 《良心分享WebRTC 零基础开发者教程中文》 更多同类文章 ……[8] IM开发综合文章 《移动端IM开发需要面对的技术问题》 《开发IM是自己设计协议用字节流好还是字符流好》 《请问有人知道语音留言聊天的主流实现方式吗》 《IM系统中如何保证消息的可靠投递即QoS机制》 《谈谈移动端 IM 开发中登录请求的优化》 《完全自已开发的IM该如何设计“失败重试”机制》 《微信对网络影响的技术试验及分析论文全文》 《即时通讯系统的原理、技术和应用技术论文》 《开源IM工程“蘑菇街TeamTalk”的现状一场有始无终的开源秀》 更多同类文章 ……[9] 开源移动端IM技术框架资料 《开源移动端IM技术框架MobileIMSDK快速入门》 《开源移动端IM技术框架MobileIMSDK常见问题解答》 《开源移动端IM技术框架MobileIMSDK压力测试报告》 《开源移动端IM技术框架MobileIMSDKAndroid版Demo使用帮助》 《开源移动端IM技术框架MobileIMSDKJava版Demo使用帮助》 《开源移动端IM技术框架MobileIMSDKiOS版Demo使用帮助》 《开源移动端IM技术框架MobileIMSDKAndroid客户端开发指南》 《开源移动端IM技术框架MobileIMSDKJava客户端开发指南》 《开源移动端IM技术框架MobileIMSDKiOS客户端开发指南》 《开源移动端IM技术框架MobileIMSDKServer端开发指南》 更多同类文章 ……[10] 有关推送技术的文章 《iOS的推送服务APNs详解设计思路、技术原理及缺陷等》 《Android端消息推送总结实现原理、心跳保活、遇到的问题等》 《扫盲贴认识MQTT通信协议》 《一个基于MQTT通信协议的完整Android推送Demo》 《求教android消息推送GCM、XMPP、MQTT三种方案的优劣》 《移动端实时消息推送技术浅析》 《扫盲贴浅谈iOS和Android后台实时消息推送的原理和区别》 《绝对干货基于Netty实现海量接入的推送服务技术要点》 《移动端IM实践谷歌消息推送服务(GCM)研究来自微信》 《为何微信、QQ这样的IM工具不使用GCM服务推送消息》 更多同类文章 ……[11] 更多即时通讯技术好文分类http://www.52im.net/forum.php?modcollectionopall原文链接http://www.cnblogs.com/myzhibie/p/4470065.html原文有改动
