WebSocket全部内容及项目经验(一)

简介: 在websocket未出来之前,实现实时数据更新都是采用轮询http请求实现的,很明显这种方式有很大的缺陷,一条数据就需要发一次http请求。HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

一.websocket简介

  在websocket未出来之前,实现实时数据更新都是采用轮询http请求实现的,很明显这种方式有很大的缺陷,一条数据就需要发一次http请求。HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。而比较新的技术去做轮询的效果是Comet。这种技术虽然可以双向通信,但依然需要反复发出请求。而且在Comet中,普遍采用的长链接,也会消耗服务器资源。在这种情况下,HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。


 websocket是一种建立在TCP协议上的一种长链接通讯模式,是HTML5推出的,全称是全双工通讯协议。它可以实现服务器和客户端双向通讯,也就是前后端可以互相发送数据。


二.WebSocket优势

 浏览器和服务器只需要要做一个握手的动作,在建立连接之后,双方可以在任意时刻,相互推送信息。同时,服务器与客户端之间交换的头信息很小。实时更新数据,连接不会断开。


  运用项目场景:实时数据更新、聊天信息、大数据列表更新。


三.简单介绍一下长链接和短链接


●  长链接:


连接->传输数据->保持连接 -> 传输数据->............ ->关闭连接。


长连接指建立SOCKET连接后不管是否使用都保持连接,但安全性较差。


●  短链接:


连接->传输数据->关闭连接


HTTP是无状态的,浏览器和服务器每进行一次HTTP操作,就建立一次连接,但任务结束就中断连接。


也可以这样说:短连接是指SOCKET连接后发送后接收完数据后马上断开连接。


四.websocket 的四个主要事件


1.open事件:一旦服务器响应了WebSocket连接请求,open事件触发并建立一个连接。open事件对应的回调函数称作onopen。                                                                            open事件触发时,协议握手已经完成,WebSocket已经准备好发送和接收数据。如果应用程序接收到一个open事件,那么可以确定WebSocket服务器成功地处理了连接请求,并且同意与应用程序通信。


2.message事件:message事件在接收到消息时触发,对应于该事件的回调函onmessage。


3.error事件:error事件在响应意外故障的时候触发,与该事件对应的回调函数为onerror。一般error触发了很快就会触发close关闭链接事件,所以当项目中websocket无法建立连接时控制台打印会让人误以为直接触发的close事件。


4.close事件:close事件在WebSocket连接关闭时触发,对应于close事件的回调函数是onclose。一旦连接关闭,客户端和服务器不再接收或者发送消息。当调用close() 方法终止与服务器的连接时,也会触发onclose事件处理程序。close事件中的代码和原因有时候能告诉你错误的根源,error事件处理程序是调用服务器重连逻辑以及处理来自WebSocket对象异常的最佳场所。

相关文章
|
1月前
|
消息中间件 前端开发 JavaScript
【前端】websocket 讲解与项目中的使用
【前端】websocket 讲解与项目中的使用
|
JSON 前端开发 安全
【Java Web项目】基于WebSocket的Web聊天室
本项目的名称为Web聊天室,即类QQ群组聊天,多个用户可以在同一个群组收发消息进行聊天
【Java Web项目】基于WebSocket的Web聊天室
|
11月前
|
网络协议 JavaScript
WebSocket全部内容及项目经验(二)
Socket.readyState: 只读属性 readyState 表示连接状态。 Socket.bufferedAmount: 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。 下面的代码展示一个使用bufferedAmount 特性每秒发送更新的例子。如果网络无法承受这一速率,它会相应作出调整。
|
11月前
|
前端开发 Java
在项目中使用WebSocket进行前后端通信
在项目中使用WebSocket进行前后端通信
249 0
|
设计模式 网络协议 算法
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
498 0
即时通讯系列: WebSocket从原理到企业项目技术选型(1)
|
移动开发 网络协议 网络安全
即时通讯系列: WebSocket从原理到企业项目技术选型(2)
阅读本篇可能需要的预备知识 《试图取代 TCP 的 QUIC 协议到底是什么》、《抓包与反抓包》、《趣谈网络协议》
194 0
|
JavaScript
在Vue项目中使用WebSocket技术
在Vue项目中使用WebSocket技术
276 0
在Vue项目中使用WebSocket技术
|
移动开发 网络协议 前端开发
websocket 项目启示录
websocket 项目启示录
173 0
websocket 项目启示录
|
前端开发 JavaScript Java
项目集成Websocket
之前接触的公安项目,里边包含大屏这一块,要求数据的实时性,考虑到这种场景,目前常见的方案有两种,轮询和Websocket通信。 轮询,其实就是定时发送请求,也就是普通的客户端与服务端通信过程,只不过是一种无限循环发送的方式,这样可以保证服务端一旦有最新消息,就可以被客户端获取。但是这种方式有两个明显的缺点,开销大并且很被动。Websocket的特点是具有一次握手,持久连接,以及主动推送,并且性能损耗较低,是解决上述场景的完美方式。
|
C# UED 数据格式
C# WebApi+Task+WebSocket实战项目演练(四)
一、课程介绍 本次分享课程属于《C#高级编程实战技能开发宝典课程系列》中的第四部分,阿笨后续会计划将实际项目中的一些比较实用的关于C#高级编程的技巧分享出来给大家进行学习,不断的收集、整理和完善此系列课程!本高级系列课程适合人群如下: 1、有一定的NET开发基础并对WebApi、Task、WebSocket技术有一定了解和认识。
1501 0