精华内容
下载资源
问答
  • websocket 传输文件及图片的…

    万次阅读 2017-10-13 16:38:20
    问题:低延迟的客户端-服务器和服务器-客户端连接 https://www.html5rocks.com/zh/tutorials/websockets/basics/ 一直以来,网络在很大程度上都是围绕着所谓 HTTP 的请求/响应模式而构建的。客户端加载一个网页,...

    问题:低延迟的客户端-服务器和服务器-客户端连接

    https://www.html5rocks.com/zh/tutorials/websockets/basics/

    一直以来,网络在很大程度上都是围绕着所谓 HTTP 的请求/响应模式而构建的。客户端加载一个网页,然后直到用户点击下一页之前,什么都不会发生。在 2005 年左右,AJAX 开始让网络变得更加动态了。但所有 HTTP 通信仍然是由客户端控制的,这就需要用户互动或定期轮询,以便从服务器加载新数据。

    长期以来存在着各种技术,可让服务器得知有新数据可用时,立即将数据发送到客户端。这些技术名目繁多,例如“推送”或 Comet。最普遍的一种黑客手段是对服务器发起的链接创建假象,这称为长轮询。利用长轮询,客户端可打开指向服务器的 HTTP 连接,而服务器会一直保持连接打开,直到发送响应。服务器只要实际拥有新数据,就会发送响应(其他技术包括 FlashXHR multipart 请求和所谓的 htmlfiles)。长轮询和其他技术非常好用,您在 Gmail 聊天等应用中经常使用它们。

    但是,这些解决方案都存在一个共同的问题:它们带有 HTTP 的开销,导致它们不适用于低延迟应用。可以想象一下浏览器中的多人第一人称射击游戏,或者其他任何带有即时要素的在线游戏。

    WebSocket 简介:将套接字引入网络

    WebSocket 规范定义了一种 API,可在网络浏览器和服务器之间建立“套接字”连接。简单地说:客户端和服务器之间存在持久的连接,而且双方都可以随时开始发送数据。

    使用入门

    只需调用 WebSocket 构造函数即可打开 WebSocket 连接:

    var connection = new WebSocket('ws://html5rocks.websocket.org/echo', ['soap', 'xmpp']);
    

    请注意 ws:。这是 WebSocket 连接的新网址架构。对于安全 WebSocket 连接还有 wss:,就像 https: 用于安全 HTTP 连接一样。

    立即向连接附加一些事件处理程序可让您知道连接打开、收到传入讯息或出现错误的时间。

    第二个参数可接受可选子协议,它既可以是字符串,也可以是字符串数组。每个字符串都应代表一个子协议名称,而服务器只能接受数组中通过的一个子协议。访问 WebSocket 对象的 protocol 属性可确定接受的子协议。

    子协议名称必须是 IANA 注册表中的某个注册子协议名称。截止 2012 年 2 月,只有一个注册子协议名称 (soap)。


    与服务器通信

    与服务器建立连接后(启动 open 事件时),我们可以开始对连接对象使用 send('your message') 方法,向服务器发送数据。该方法以前只支持字符串,但根据最新的规范,现在也可以发送二进制讯息了。要发送二进制数据,您可以使用 Blob 或 ArrayBuffer 对象。

    // Sending String 
    
    connection.send('your message'); 
    
    // Sending canvas ImageData as ArrayBuffer 
    
    var img = canvas_context.getImageData(0, 0, 400, 320);
    var binary = new Uint8Array(img.data.length);
    for (var i = 0; i <</span> img.data.length; i++) {
      binary[i] = img.data[i];
    }
    connection.send(binary.buffer); 
    
    // Sending file as Blob 
    
    var file = document.querySelector('input[type="file"]').files[0];
    connection.send(file);
    

    同样,服务器也可能随时向我们发送讯息。只要发生这种情况,就会启动 onmessage 回调。该回调接收的是事件对象,而实际的讯息可通过 data 属性进行访问。

    在最新规范中,WebSocket 也可以接收二进制讯息。接收的二进制帧可以是 Blob或 ArrayBuffer 格式。要指定收到的二进制数据的格式,可将 WebSocket 对象的 binaryType 属性设为“blob”或“arraybuffer”。默认格式为“blob”(您不必在发送时校正 binaryType 参数)。

    // Setting binaryType to accept received binary as either 'blob' or 'arraybuffer' 
    
    connection.binaryType = 'arraybuffer';
    connection.onmessage = function(e) {
      console.log(e.data.byteLength); 
    
    // ArrayBuffer object if binary
    };
    

    WebSocket 的另一个新增功能是扩展。利用扩展,可以发送压缩帧、多路复用帧等。您可以检查 open 事件后的 WebSocket 对象的 extensions 属性,查找服务器所接受的扩展。截止 2012 年 2 月,还没有官方发布的扩展规范。

     

    // Determining accepted extensions 
    
    console.log(connection.extensions);
    

    跨源通信

    作为现代协议,跨源通信已内置在 WebSocket 中。虽然您仍然应该确保只与自己信任的客户端和服务器通信,但 WebSocket 可实现任何域上多方之间的通信。服务器将决定是向所有客户端,还是只向驻留在一组指定域上的客户端提供服务。

     

    代理服务器

    每一种新技术在出现时,都会伴随着一系列问题。WebSocket 也不例外,它与大多数公司网络中用于调解 HTTP 连接的代理服务器不兼容。WebSocket 协议使用 HTTP 升级系统(通常用于 HTTP/SSL)将 HTTP 连接“升级”为 WebSocket 连接。某些代理服务器不支持这种升级,并会断开连接。因此,即使指定的客户端使用了 WebSocket 协议,可能也无法建立连接。这就使得下一部分的内容更加重要了。

    立即使用 WebSocket

    WebSocket 仍是一项新兴技术,并未在所有浏览器中全面实施。而在无法使用 WebSocket 的情况下,只要通过一些使用了上述某个回调的库,就可以立即使用 WebSocket 了。在这一方面使用非常普遍的库是 socket.io,其中自带了协议的客户端和服务器实施,并包含回调(截止 2012 年 2 月,socket.io 还不支持二进制讯息传输)。还有一些商业解决方案,例如 PusherApp,通过提供向客户端发送 WebSocket 讯息的 HTTP API,可轻松地集成到任何网络环境中。由于额外的 HTTP 请求,这些解决方案与纯 WebSocket 相比总是会有额外的开销。

    服务器端

    使用 WebSocket 为服务器端应用带来了全新的用法。虽然 LAMP 等传统服务器堆栈是围绕 HTTP 请求/响应循环而设计的,但是通常无法很好地处理大量打开的 WebSocket 连接。要同时维持大量连接处于打开状态,就需要能以低性能开销接收高并发数据的架构。此类架构通常是围绕线程或所谓的非阻塞 IO 而设计的。

    服务器端实施

    协议版本

    现在,WebSocket 的单线协议(客户端与服务器之间的握手和数据传输)是 RFC6455。最新版的 Chrome 浏览器和 Android 版 Chrome 浏览器与 RFC6455 完全兼容(包括二进制讯息传输)。另外,Firefox 11 和 Internet Explorer 10 也会实现兼容。您仍可以使用旧版协议,但由于它们已知存在漏洞,我们不建议使用。如果您有旧版 WebSocket 协议的服务器实施,我们建议您将其更新到最新版本。

     

    用例

    如果您需要在客户端与服务器之间建立极低延迟、近乎即时的连接,则可使用 WebSocket。请记住,这可能需要您重新考虑构建服务器端应用的方式,将新的关注点放在事件队列等技术上。以下是一些用例:

    • 多人在线游戏
    • 聊天应用
    • 体育赛况直播
    • 即时更新社交信息流
    展开全文
  • WebSocket 概览

    2018-12-26 10:37:06
    WebSocket 概览 一. 简介  WebSocket 是一个协议。 它允许客户端与服务端基于TCP ( tcp:是一种面向连接的,可靠的...同时WebSocket能节约带宽,CPU资源并减少延迟。解决了http单向,无状态,无连接的通信问题。 ...

                                           WebSocket 概览

    一. 简介

        WebSocket 是一个协议。 它允许客户端与服务端基于TCP ( tcp:是一种面向连接的,可靠的,基于字节流的传输层通信协议 )建立实时双向,异步链接及数据传输。同时WebSocket能节约带宽,CPU资源并减少延迟。解决了http单向,无状态,无连接的通信问题。

        如果服务器需要双向全双工通信,那么websocket 是个很好的选择。

        普及: 

        Web实时通信(Web Real-Time Communication, WebRTC)是增强现代Web浏览器通信能力的另一种努力。WebRTC是Web的点对点技术。浏览器可以直接通信,而不需要通过服务器传输所有的数据。

     

    二. WebSocket API

    1.  WebSocket  API概览

         websocket 连接通过在客户端和服务器之间第一次握手时将HTTP协议升级到WebSocket协议来完成,这一工作在相同的底层TCP连接上进行。一旦建立,websocket消息可以在websocket接口dinginess的方法之间来回传送。在应用程序代码中,可以使用异步事件监听器处理连接生命周期的每个阶段。

         WebSocket API 完全是(真正的)事件驱动的。一旦建立全双工连接,当服务器需要发送到客户端的数据,或者你所关心的资源将要改变状态时,他会自动发送数据或者通知。

    2. API 简介

        为了建立到服务器的WebSocket连接,使用WebSocket接口,通过指向一个代表所有要连接的端点的URL,实例化一个 WebSocket对象(WebSocket构造函数)。使用WebSocket构造函数的必须参数,它必须是以ws:// 或者wss://开始的一个完全限制的URL。

        WebSocket 协议定义了两种URL方案(URL scheme), WS 和 WSS.分别用户客户端和服务器之间的非加密与加密流量。

        ws(WebSocket) 方案与 HTTP URI 方案类似。

        wss(WebSocket Secure, WebSocket 安全) URI 方案表示使用传输层安全性(TLS, 也叫SSL)的WebSocket连接,使用HTTPS采用的安全机制来保证HTTP连接的安全。

      WebSocket 最大的好处之一是能在WebSocket上简历广泛使用的协议层次。

    2.1 WebSocket 事件

        WebSocket API 是纯事件驱动的。应用程序代码监听WebSocket对象上的事件,以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。

        WebSocket 编程遵循异步编程模式。要开始监听事件,只要为WebSocket 对象添加回调函数。 也可以使用addEventListener() DOM方法为WebSocket 对象添加事件监听器。

    和所有Web API一样, 可以使用on<事件名称>处理程序属性监听这些事件,也可以使用addEventListener()方法。

        WebSocket 对象调度4个不同的事件:

         open: 对应的回调函数称作onopen。到open事件触发时,协议握手已经完成,WebSocket已经准备好发送和接收数据;

         message:  在客户端接收到服务端消息时触发。对应于该事件的回调函数是onmessage.

         error: 响应意外故障的时候触发。close事件中的代码和原因有时候能告诉你错误的根源。error事件处理程序是调用服务器连接逻辑以及处理来自WebSocket对象的异常的最佳场景。

         close:在WebSocket 连接关闭时触发。对应于close事件的回调函数是onclose. 一旦连接关闭,客户端和服务器不再能接收或者发送消息。close事件有3个有用的属性,可以用于错误处理和恢复:wasClean, code 和 error。 wasClean 属性是一个布尔属性,表示连接是否顺利关闭。如果WebSocket 的关闭是对来自服务器的一个close帧的响应,则该属性为 true.   如果连接是因为其它原因(例:底层TCP连接关闭)关闭,则该属性为false; code 和 reason 属性表示服务发送的关闭握手状态。

       

        

     

    未完待续......

     

    展开全文
  • WebSocket API

    千次阅读 2012-07-19 16:15:51
    HTML5 WebSocket是HTML5中最强大的通信功能,定义了一个全双工通信信道,仅通过Web上的一个Socket即可进行...1、使用Comet技术可以让服务器主动以异步方式向客户端推送信息,会使针对传输信息到客户端的响应延迟完成。

    HTML5 WebSocket是HTML5中最强大的通信功能,定义了一个全双工通信信道,仅通过Web上的一个Socket即可进行通信;是对常规HTTP通信的另一种增量加强。

    (一)实时和HTTP:

    WebSocket之前实现都是通过传统的Comet和Ajax轮询、长轮询以及流解决的。

    1、使用Comet技术可以让服务器主动以异步方式向客户端推送信息,会使针对传输信息到客户端的响应延迟完成。

    2、使用轮询,浏览器会定时发送HTTP请求,并随即接收响应。如果知道消息传递准确时间间隔,轮询是一个很好的方法,但是不可测的请求会有很多无用的打开和关闭。

    3、使用长轮询,浏览器想服务器发送请求,服务器会在一段时间内保持打开状态,期间服务器收到通知,会向客户端发送包含消息的响应,如果长时间没有通知,就会发送响应消息终止打开请求。当请求量大时,和传统轮询方式无异。

    4、使用流解决方案,浏览器向服务端发送一个请求,服务器会发送并保持处于打开状态的响应,响应持续更新并无限期处于打开状态,有消息相应会被更新,但服务器永远不会发出响应完成的信号,就会一直处于打开状态。因为流任是封装在HTTP中,防火墙和代理服务器可能会对响应进行缓冲,造成消息延迟,当检测到缓冲代理服务器时,流解决会退回长轮询方式,此外可以用TLS(SSL)连接保护响应不被响应,但此情况下每个连接的创建和清除会消耗更多服务器资源。

    综上所述,所有提供实时数据方式都涉及HTTP请求和响应报头,包含大量额外数据,会造成传输延迟。最重要是全双工连接还需要客户端到服务端的上行连接,在半双工HTTP上模拟,目前大多数都是使用两个连接:一个下行数据流,一个上行数据流,会造成大量资源耗费并增加复杂度。

    (二)WebSocket的出现:

    WebSocket是Web应用程序的传输协议,类似TCP,提供了双向的,按序列到达的数据流,和TCP协议一样,高层协议能在WebSocket上运行,WebSocket连接的是URL,而非因特网上的主机地址和端口。

    (三)使用WebSockets API

    1、浏览器支持情况监测:

        if(window.WebSocket)    //返回true为支持WebSocket

    2、基本用法:

    创建WebSocket实例,并提供连接的url。ws://和wws://分别表示WebSocket连接和安全的WebSocket连接。

        var url="ws://localhost:8080/server" ;

        var w = new WebSocket(url) ;

    建立WebSocket连接时,可以传入指定的通信协议

        var w = new WebSocket(url, ["proto1","proto2"]) ;

    2、添加事件监听:

    WebSocket遵循异步编程模型,打开socket,只需要监听事件等待回调函数,不需要服务器轮询。

    WebSocket对象三个事件:open(打开)、close(关闭)和message(接收到消息)。

        w.onopen = function() { } ;

        w.onmessage = function() { } ;

        w.onclose = function() { } ;

    3、发送消息:

    socket处于打开状态,可以调用send方法发送消息,完成后可以调用close()关闭或者保持连接。

        w.send(data) ;

    展开全文
  • WebSocket前端准备SockJS:SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。StompStomp ...

    WebSocket前端准备

    SockJS:

    SockJS 是一个浏览器上运行的 JavaScript 库,如果浏览器不支持 WebSocket,该库可以模拟对 WebSocket 的支持,实现浏览器和 Web 服务器之间低延迟、全双工、跨域的通讯通道。

    Stomp

    Stomp 提供了客户端和代理之间进行广泛消息传输的框架。Stomp 是一个非常简单而且易用的通讯协议实现,尽管代理端的编写可能非常复杂,但是编写一个 Stomp 客户端却是很简单的事情,另外你可以使用 Telnet 来与你的 Stomp 代理进行交互。

    发送公告功能

    html代码

    javascript代码

    相关说明:

    关于JavaScript实现WebSocket的功能很简单,基本分以下几步:

    开启Socket

    var socket = new SockJS('/socket'); 先构建一个SockJS对象

    stompClient = Stomp.over(socket); 用Stomp将SockJS进行协议封装

    stompClient.connect() 与服务端进行连接,同时有一个回调函数,处理连接成功后的操作信息。

    发送消息

    stompClient.send("/app/change-notice", {}, value);

    页面预览:

    Paste_Image.png

    修改公告功能

    当我们发送公告后,将上图的公告信息在不刷新页面的情况下,使用WebSocket将其改变。发送公告的前端代码已经完成,现在我们来写另一个客户端,用来接收第一个页面发送的公告,展示在上图红框中。

    功能比较简单,所以下面只给出部分js代码:

    相关说明:

    这里与发送公告代码不同的是,在stompClient建立连接成功之后,我们要监听服务端发送过来的信息,接收到之后,改变页面上公告的内容,所以用到了stompClient.subscribe()

    这个subscribe()方法功能就是定义一个订阅地址,用来接收服务端的信息(在服务端代码中,我们在@SendTo中指定了这个订阅地址“/topic/notice”),当收到消息后,在回调函数中处理业务逻辑。

    至此,所有的功能开发完毕!

    效果演示

    首先我们发布一条公告:

    然后我们切到另一个页面,发现内容已变:

    展开全文
  • WebSocket使用

    千次阅读 2013-10-15 09:47:12
    目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,Comet、轮询、长轮询、流(streaming)解决方案,所有这些提供实时数据的方式包含有大量额外的、不必要的报头数据,会造成传输延迟。...
  • HTML5中的WebSocket连接

    千次阅读 2016-10-04 15:29:51
    什么是WebSocketWebSocket 是一种自然的全双工、双向、单套接字连接。使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,...WebSocket 减少了延迟
  • http、https、http2、websocket之间的关系http:目前绝大多数是http1.1版本,最原始的web协议,默认80端口,基于TCP协议。...在与HTTP/1.1完全语义兼容的基础上,进一步减少了网络延迟传输的安全性,基于TCP。...
  • 微信小程序之WebSocket

    2017-09-28 16:14:28
    一方面可以避免轮询带来的连接频繁建立与断开的性能损耗,另一方面数据可以是比较实时的进行双向传输(因为是长链接),而且WebSocket允许跨域通信(这里有个潜在的跨域安全的问题,得靠服务端来解决)。目前除IE外...
  • WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们。例如,和轮询不同,WebSocket只发出一个请求。服务器不需要等待来自客户端的请求。相似地,客户端可以在任何时候向服务
  • 为什么要用 WebSocket

    2016-12-21 15:52:00
    WebSocket 直接使用 TCP 连接保持全双工的传输,可以有效地减少连接的建立,实现真正的服务器通信,对于有低延迟有要求的应用是一个很好的选择。 目前浏览器对 WebSocket 的支持程度已经很好,加上微信小程序的...
  • WebSocket(二)

    2017-09-08 12:59:11
    目前实时Web应用的实现方式,大部分是围绕轮询和其他服务器端推送技术展开的,Comet、轮询、长轮询、流(streaming)解决方案,所有这些提供实时数据的方式包含有大量额外的、不必要的报头数据,会造成传输延迟。...
  • 超快速和低延迟异步套接字服务器和客户端C#.NET Core库,支持TCP,SSL,UDP,HTTP,HTTPS,WebSocket协议和解决方案。 内容 产品特点 跨平台(Linux,OSX,Windows) 异步通讯 支持的传输协议: , , , 支持的...
  • 4、WebSocket协议开发

    2019-01-29 10:55:08
    概述: ... 不适用低延迟应用。 如果有新数据可用时,立即将数据发送到客户端。需要通过长轮询等方式实现。...而WebSocket将网络套接字引入...数据可以在客户端和服务端两个方向上传输,但是同一时刻,只有一个方向上的...
  • :)还包括在通过websocket连接执行脚本时传输会话ID以获取相同的用户会话。 仍然需要Web服务器来传递初始index.php,但是,一旦打开websocket连接,所有请求都将通过websocket处理。 对localhost的影响很小,但我...
  • WebSocket使用场景 ... 即使在要求低延迟的应用场景,如果传输的消息数很低(比如监测网络故障的场景),那么应该考虑使用长轮询技术。 而只有在低延迟和高频消息通信的场景下,选用WebSocket协议才是非常适合
  • 如果失败了,它可以使用各种特定于浏览器的传输协议,并通过类似WebSocket的抽象表示它们。 SockJS旨在用于所有现代浏览器以及不支持WebSocket协议的环境(例如,限制性公司代理背后的环境)。 SockJS-client确实...
  • 我们将使用HTML5 WebSocket API向我们的RTS游戏加入多人对战支持 ...虽然这些方式确实有效,但是过高的带宽占用率和网络传输延迟使它们不适合在即时的多人对战游戏中使用。  WebSocket API的出现改变了这一切
  • Android搭建HTTP和WebSocket的服务器端

    千次阅读 2020-03-07 11:21:08
    Android服务器搭建Android服务器搭建AndServer搭建HTTP服务器...当需要一定数据传输时,如果额外搭建服务器,会造成一定的开发成本问题和数据延迟问题。这时如果搭建一个Android平台服务器,可以很好的解决此问题...
  • http、https、http2、websocket之间的关系http:目前绝大多数是http1.1版本,最原始的web协议,默认80端口,基于TCP协议。...在与HTTP/1.1完全语义兼容的基础上,进一步减少了网络延迟传输的安全性,基于TCP。...
  • 注:本文不涉及具体的概念,只探究他们之间的关系 http:目前绝大多数是http1.1版本,最原始的web协议,默认80端口... ... ...在与HTTP/1.1完全语义兼容的基础上,进一步减少了网络延迟传输的安全性,基于TCP。 websock...
  • 一个 TCP 连接从创建到结束一共有 3 个阶段,分别为“三次握手”建立连接、客户端与服务端进行数据包传输、“四次挥手”断开连接。 客户端与服务端的每一次完整的消息交互(发请求——响应)都建立一次 TCP 连接,...
  • 缺少类似WebSocket的API,没有行头阻塞 它提供: 可靠的流 不可靠的数据报 加密和拥塞控制 基于起源的安全模型 QUIC的绑定 与现有HTTP / 3连接的多路复用 可以扩展到其他协议的灵活API,例如TCP回退和p2p 无需...
  • 通过websocket、RTMP、UDP的比较,最后选择了可靠的UDP协议KCP来进行实时音视频的传输。1 简介KCP是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均延迟降低 30%-40%,且最大延迟降低三倍...
  • 以目前成熟的LoRa解决方案为基础,在其架构的应用层与服务层间的通信中引入MQTT和Websocket技术,并在服务层中结合使用Node.js、Redis等技术,设计实现低延时实验室安全监测系统。该系统应用层包含Web端页面数据实时...
  • Flask-SocketIO的使用

    2021-05-08 21:59:43
    Flask-SocketIO为Flask应用程序提供对客户端和服务器之间的低延迟双向通信的访问。客户端应用程序可以使用Javascript,C++,Java和Swift中任何SocketIO...eventlet:高性能选项,支持长轮询和WebSocket传输 gevent:
  • 后端实现了websocket主动推送,现在想在网页上显示推送的数据,但是由于推送的数据量特别庞大,自己的处理比较缓慢,不但造成了数据推送的延迟,页面也特别卡顿,进行点击button等组件的操作也特别卡顿。我在...
  • 通过websocket、RTMP、UDP的比较,最后选择了可靠的UDP协议KCP来进行实时音视频的传输。1 简介KCP是一个快速可靠协议,能以比 TCP浪费10%-20%的带宽的代价,换取平均延迟降低 30%-40%,且最大延迟降低三倍...
  • 1.在后台需要的是springBoot框架2.socketjs: 1. 是一个浏览器JavaScript库,提供了一个类似WebSocket的对象 2.... 在底层SocketJs首先尝试使用本地webSocket,如果失败了,它可以使用各种浏览器特定的传输协议...
  • KCP协议 详解***

    千次阅读 2019-03-22 17:42:50
    云真机已经支持手机端的画面投影。...通过websocket、RTMP(Real Time Messaging Protocol(实时消息传输协议))、UDP的比较,最后选择了可靠的UDP协议KCP来进行实时音视频的传输。 1 简介 KCP是一个快速可...

空空如也

空空如也

1 2 3 4
收藏数 61
精华内容 24
关键字:

websocket传输延迟