服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - 编程技术 - 带你了解一下WebSocket技术

带你了解一下WebSocket技术

2020-12-10 23:49今日头条低调的干货君 编程技术

在WebSocket规范提出之前,开发人员实现实时性较强的功能基本采用两种轮询方法:轮询(polling)和Comet技术。

在WebSocket规范提出之前,开发人员实现实时性较强的功能基本采用两种轮询方法:轮询(polling)和Comet技术。

轮询:轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求,频繁地查询是否有新的数据改动。明显地,这种方法会导致过多不必要的请求,浪费流量和服务器资源。

Comet技术可分为:长轮询、流技术。长轮询改进了上述的轮询技术,减小了无用的请求。它会为某些数据设定过期时间,当数据过期后才会向服务端发送请求;这种机制适合数据的改动不是特别频繁的情况。流技术**指客户端使用一个隐藏的窗口与服务端建立HTTP长连接,服务端会不断更新连接状态以保持HTTP长连接存活,然后才能主动推送数据给客户端。

缺点:这两种技术每一次请求、应答,都浪费了一定流量在相同的头部信息上,并且开发复杂度也较大。

伴随着HTML5推出的WebSocket,使B/S模式具备了C/S模式的实时通信能力。WebSocket连接本质上是TCP连接,不需要每次传输都带上重复的头部数据。WebSocket的工作流程:浏览器通过JavaScript向服务端发出建立WebSocket连接的请求,在WebSocket连接建立成功后,客户端和服务端就可以通过TCP连接传输数据。

WebSocket与TCP、HTTP的关系

WebSocket与http协议一样都是基于TCP的可靠协议,WebSocket在建立握手连接时,数据是通过http协议传输的,但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。

带你了解一下WebSocket技术

websocket通讯原理

从下图可以明显的看到,分三个阶段:

打开握手

数据传递

关闭握手

带你了解一下WebSocket技术

下图显示了WebSocket主要的三步 浏览器和 服务器端分别做了那些事情。

带你了解一下WebSocket技术

websocket优缺点

a)、服务器与客户端之间交换的标头信息很小,大概只有2字节;

b)、客户端与服务器可互相主动传送数据给对方;

c)、Websocket是http协议的升级,支持持久连接并只需一次握手。不用频率创建TCP请求及销毁请求,减少网络带宽资源的占用,同时也节省服务器资源;

Spring boot websocket实现

引入依赖

org.springframework.boot

spring-boot-starter-websocket

 

创建 WebSocket 处理器

扩展 TextWebSocketHandler 或 BinaryWebSocketHandler ,你可以覆写指定的方法。Spring 在收到 WebSocket 事件时,会自动调用事件对应的方法。

packagecom.ganhuojun.websocket.spring;

importorg.springframework.stereotype.Component;

importorg.springframework.web.socket.CloseStatus;

importorg.springframework.web.socket.WebSocketHandler;

importorg.springframework.web.socket.WebSocketMessage;

importorg.springframework.web.socket.WebSocketSession;

@Component

publicclassMySpringWebSocketHandlerimplementsWebSocketHandler{

/**

*建立连接后触发的回调

*/

@Override

publicvoidafterConnectionEstablished(WebSocketSessionwebSocketSession)throwsException{

System.out.println("spring链接"+webSocketSession.getId());

}

/**

*收到消息时触发的回调

*/

@Override

publicvoidhandleMessage(WebSocketSessionwebSocketSession,WebSocketMessagewebSocketMessage)throwsException{

}

/**

*传输消息出错时触发的回调

*/

@Override

publicvoidhandleTransportError(WebSocketSessionwebSocketSession,Throwablethrowable)throwsException{

}

/**

*断开连接后触发的回调

*/

@Override

publicvoidafterConnectionClosed(WebSocketSessionwebSocketSession,CloseStatuscloseStatus)throwsException{

}

/**

*是否处理分片消息

*/

@Override

publicbooleansupportsPartialMessages(){

returnfalse;

}

}

配置 WebSocket

将 WebSocket 处理器添加到注册中心

packagecom.ganhuojun.websocket.spring;

importorg.springframework.context.annotation.Bean;

importorg.springframework.context.annotation.Configuration;

importorg.springframework.web.socket.config.annotation.EnableWebSocket;

importorg.springframework.web.socket.config.annotation.WebSocketConfigurer;

importorg.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Configuration

@EnableWebSocket

publicclassSpringWebSocketConfigimplementsWebSocketConfigurer{

@Override

publicvoidregisterWebSocketHandlers(WebSocketHandlerRegistryregistry){

//spring默认会给一个OriginHandshakeInterceptor的拦截器

//因此需要setAllowedOrigins,否则websocket返回403

registry.addHandler(springWebSocketHandler(),"/spring/websocket").setAllowedOrigins("*");

}

@Bean

publicMySpringWebSocketHandlerspringWebSocketHandler(){

returnnewMySpringWebSocketHandler();

}

}

前端可以自己编写js代码,本文直接使用websocket在线调试工具

http://www.websocket-test.com/

如下图,

带你了解一下WebSocket技术

根据前面后端代码,测试一下

#FormatImgID_4#

后端日志

带你了解一下WebSocket技术

延伸 · 阅读

精彩推荐
  • 编程技术2021年值得关注的React PDF 库

    2021年值得关注的React PDF 库

    今天,许多网络应用程序为其用户提供内置的PDF浏览选项。然而,选择一个并不容易,因为它们的功能远远超过显示PDF。在这篇文章中,我将评估5个React的...

    TianTianUp5222021-06-21
  • 编程技术让开发效率倍增的 VS Code 插件

    让开发效率倍增的 VS Code 插件

    今天来分享一些提升开发效率的实用 VS Code 插件!Better Comments 扩展可以帮助我们在代码中创建更人性化的注释,有不同形式和颜色的注释供我们选择。 ...

    前端充电宝7132022-04-21
  • 编程技术用户态 Tcpdump 如何实现抓到内核网络包的?

    用户态 Tcpdump 如何实现抓到内核网络包的?

    在网络包的发送和接收过程中,绝大部分的工作都是在内核态完成的。那么问题来了,我们常用的运行在用户态的程序 tcpdump 是那如何实现抓到内核态的包...

    开发内功修炼11612021-09-08
  • 编程技术简单、好懂的Svelte实现原理

    简单、好懂的Svelte实现原理

    本文会围绕一张流程图和两个Demo讲解,正确的食用方式是用电脑打开本文,跟着流程图、Demo一边看、一边敲、一边学...

    魔术师卡颂4822021-11-10
  • 编程技术真正聪明的程序员,总有办法不加班

    真正聪明的程序员,总有办法不加班

    工作效率提升了,就可以少加班了,聪明的程序员,总会有一堆可以提升编码效率的工具?当一种工具满足不了工作需求,就去探索新的,今天纬小创就给...

    今日头条12482021-03-04
  • 编程技术Delphi - Indy idMessage和idSMTP实现邮件的发送

    Delphi - Indy idMessage和idSMTP实现邮件的发送

    这篇文章主要介绍了Delphi - Indy idMessage和idSMTP实现邮件的发送,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下...

    JJ_JeremyWu6592020-09-22
  • 编程技术AIOps,SRE工程师手中的利器

    AIOps,SRE工程师手中的利器

    AIOps开始成为一种极为重要的站点可靠性工程工具。它能够高效吸纳观察数据、参与数据以及来自第三方工具的数据,判断系统运行状态并保证其处于最佳...

    至顶网5962021-03-08
  • 编程技术从Context源码实现谈React性能优化

    从Context源码实现谈React性能优化

    这篇文章主要介绍Context的实现原理,源码层面掌握React组件的render时机,从而写出高性能的React组件,源码层面了解shouldComponentUpdate、React.memo、PureComponen...

    魔术师卡颂5312020-12-20