-
webSocket建立连接的过程
2017-06-08 09:41:17webSocket是用来解决B/S模式中长连接的问题,实现浏览器和服务器间的消息推送和接收。浏览器先发送http报文,借用了http协议来完成一部分握手,这个http报文中有这么一段信息"Upgrade:websocket",这是告诉服务器...webSocket有些乱,整理一下:
webSocket是用来解决B/S模式中长连接的问题,实现浏览器和服务器间的消息推送和接收。浏览器先发送http报文,借用了http协议来完成一部分握手,这个http报文中有这么一段信息"Upgrade:websocket",这是告诉服务器"你好,我要切换协议"。服务器接收后,回复一个http报文,告诉浏览器"好的,我已经切换到websocket协议了"。从这里以后就不用http报文了,接下来就完全按照websocket协议进行了。 -
WebSocket建立连接的过程
2020-08-04 13:39:39发送消息: 接收消息: (2)开始编写建立websocket连接的过程 首先定义一个CHAT对象 window.CHAT = { soctet: null, init:function() { //初始化的方法 //判断当前浏览器是否支持websocket if(window....1.实时通讯的方式
1.1 Ajax轮询
异步的方式,是通过ajax+js的方式,每隔一段时间发送一个请求到后端,询问服务器有没有相关的消息或者是数据的更新,如果有就把数据拿到前端进行渲染。但是这种方式是一种死循环,会一直循环下去。ajax是不需要刷新浏览器的,页面上的一些状态更新的操作就需要使用ajax轮询去做。
1.2 Long pull
Long pull的原理和Ajax轮询的方式是差不多的,但是不同的是Long pull是一种阻塞的方式。性能差
这两种方式其实都是向服务器发送请求等待处理,都是被动的。这两种方式的性能都是不怎么好的。1.3 Websocket
websocket是一种连接协议,是一种长连接,http1.0是一种短连接。服务端和客户端会一直保持着连接。并且服务端会主动的推送消息给客户端。websocket是一种实时化的协议,Http的一个周期是request来界定。也就是说有一个请求发送到服务端,服务端就会做出响应。一个request对应一个response。多个request对应的是多个response。数量是一一对应的。
websocket连接建立之后,服务端就会一直不停的向客户端发送请求。主动的推送消息给客户端。只需要建立一次请求,就会源源不断的推送想要的数据给客户端。除非自己断开连接重新连接。2.websock连接的过程
首先写一个小demo
(1)先在html界面上构建一个骨架,用于展示发送消息和接收消息的内容。<div>发送消息:</div> <input type="text" id="msgContent"/> <input type="button" value="点击发送" onclick="CHAT.chat()"/> <div>接收消息:</div> <div id="receiveMsg" style="background-color: gainsboro;"></div>
(2)开始编写建立websocket连接的过程
首先定义一个CHAT对象window.CHAT = { soctet: null, init:function() { //初始化的方法 //判断当前浏览器是否支持websocket if(window.WebSocket) { // 进行初始化操作 CHAT.socket = new WebSocket('ws://localhost:8080/ws'); //创建一个新的WebSocket //定义CHAT生命周期函数 CHAT.socket.onopen = function() { console.log('客户端和服务端的连接建立成功'); } CHAT.socket.onmessage = function() { console.log('接收到的消息' + e.data); var receiveMsg = document.getElementById('receiveMsg'); var html = receiveMsg.innerHTML; receiveMsg.innerHTML = html + "<br />" + e.data; } CHAT.socket.onclose = function() { console.log('消息关闭.....'); } CHAT.socket.onerror = function() { console.log('消息发生错误'); } }else { alert('当前浏览器不支持websocket协议'); } }, chat:function() { var msg = document.getElementById("msgContent"); CHAT.socket.send(msg.value); } }
-
websocket 连接过程
2020-03-30 14:43:39websocket 连接的建立需要借助 http,连接建立完之后就与 http 无关了。 过程 Connection:Connection必须设置为Upgrade,表示客户端希望连接升级 Upgrade:Upgrade必须设置为WebSocket,表示在取得服务器响应之后...首先,websocket属于应用层协议,和 http 一样也是基于 TCP/IP 协议。websocket 连接的建立需要借助 http,连接建立完之后就与 http 无关了。
过程
Connection:Connection必须设置为Upgrade,表示客户端希望连接升级
Upgrade:Upgrade必须设置为WebSocket,表示在取得服务器响应之后,使用HTTP升级将HTTP协议转换(升级)为WebSocket协议。
Sec-WebSocket-key:随机字符串,用于验证协议是否为WebSocket协议而非HTTP协议
Sec-WebSocket-Version:表示使用WebSocket的哪一个版本。
Sec-WebSocket-Accept:根据Sec-WebSocket-Accept和特殊字符串计算。验证协议是否为WebSocket协议。
Sec-WebSocket-Location:与Host字段对应,表示请求WebSocket协议的地址。
HTTP/1.1 101 Switching Protocols:101状态码表示升级协议,在返回101状态码后,HTTP协议完成工作,转换为WebSocket协议。此时就可以进行全双工双向通信了。
-
Soul 学习笔记---数据同步 websocket 连接建立过程分析(五)
2021-01-19 22:12:09上一篇讲到 soul 是如何使用 websocket 进行数据同步的,今天来分析下,websocket 连接是什么时候建立的。 上一篇也讲到,启动 soul-admin 时,因为 yml 配置了使用 websocket 进行同步,会加载这三个类,...上一篇讲到
soul
是如何使用websocket
进行数据同步的,今天来分析下,websocket
连接是什么时候建立的。上一篇也讲到,启动
soul-admin
时,因为yml
配置了使用websocket
进行同步,会加载这三个类,WebsocketCollector
这个类就是开启一个websocket
服务。soul-bootstrap
的pom
文件引入了这个starter
。<!--soul data sync start use websocket--> <dependency> <groupId>org.dromara</groupId> <artifactId>soul-spring-boot-starter-sync-data-websocket</artifactId> <version>${project.version}</version> </dependency>
启动
soul-bootstrap
时,就会去寻找soul-spring-boot-starter-sync-data-websocket
包resources/META-INF/spring.factories
文件,然后根据文件中配置去加载指定模块。//spring.factories 文件内容 org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ org.dromara.soul.spring.boot.starter.sync.data.websocket.WebsocketSyncDataConfiguration
这个文件配置的就是
WebsocketSyncDataConfiguration
类。看到这个类的代码,我先去查了下
ObjectProvider
相关知识。在
spring4.3
之前,我们需要在一个类 A 里注入另一个类 B 时,会使用@Autowired
注解,不加程序会报异常。4.3 后,引入了一个新特性,我们只需要在类 A 加一个构造函数,B 作为构造函数的参数传进来,就可以不加@Autowired
,但 B 必须要在spring
容器中,否则会出现异常,此时我们就需要 引入ObjectProvider
。//4.3 之前 @Service public class A { private final B b; @Autowired public A (B b) { this.b = b } } //4.3 之后,不需要加 @Autowired 注解,但如果 B 不在 spring 容器,会报异常 @Service public class A { private final B b; public A (B b) { this.b = b } } //引入 ObjectProvider @Service public class A { private final B b; public A(ObjectProvider<B> bProvider) { //如果不可用或不唯一(没有指定primary)则返回null。否则,返回对象。 this.b = bProvider.getIfUnique(); } }
在下面这个类里,使用的是
ObjectProvider
的getIfAvailable(Supplier<T> defaultSupplier)
方法,这个方法是说 如果对象存在直接返回,对象不存在,就进行回调,回调对象由defaultSupplier
提供。@Configuration @ConditionalOnClass(WebsocketSyncDataService.class) @ConditionalOnProperty(prefix = "soul.sync.websocket", name = "urls") @Slf4j public class WebsocketSyncDataConfiguration { /** * Websocket sync data service. */ @Bean public SyncDataService websocketSyncDataService(final ObjectProvider<WebsocketConfig> websocketConfig, final ObjectProvider<PluginDataSubscriber> pluginSubscriber, final ObjectProvider<List<MetaDataSubscriber>> metaSubscribers, final ObjectProvider<List<AuthDataSubscriber>> authSubscribers) { log.info("you use websocket sync soul data......."); return new WebsocketSyncDataService(websocketConfig.getIfAvailable(WebsocketConfig::new), pluginSubscriber.getIfAvailable(), metaSubscribers.getIfAvailable(Collections::emptyList), authSubscribers.getIfAvailable(Collections::emptyList)); } /** * Config websocket config. * * @return the websocket config */ @Bean @ConfigurationProperties(prefix = "soul.sync.websocket") public WebsocketConfig websocketConfig() { return new WebsocketConfig(); } }
WebsocketSyncDataConfiguration
这个类的加载依赖于soul.sync.websocket
,而我们在soul-bootstrap
配置如下,所以会加载这个类。可以看到这个类创建了一个
WebsocketSyncDataService
对象,就是在这个service
,创建了一个webSocket
客户端,和我们在soul-admin
创建的websocket
服务建立了连接,这里还有一个线程池ScheduledThreadPoolExecutor
,如果客户端连接关闭,会定时尝试重新连接。public WebsocketSyncDataService(final WebsocketConfig websocketConfig, final PluginDataSubscriber pluginDataSubscriber, final List<MetaDataSubscriber> metaDataSubscribers, final List<AuthDataSubscriber> authDataSubscribers) { String[] urls = StringUtils.split(websocketConfig.getUrls(), ","); executor = new ScheduledThreadPoolExecutor(urls.length, SoulThreadFactory.create("websocket-connect", true)); for (String url : urls) { try { clients.add(new SoulWebsocketClient(new URI(url), Objects.requireNonNull(pluginDataSubscriber), metaDataSubscribers, authDataSubscribers)); } catch (URISyntaxException e) { log.error("websocket url({}) is error", url, e); } } try { for (WebSocketClient client : clients) { boolean success = client.connectBlocking(3000, TimeUnit.MILLISECONDS); if (success) { log.info("websocket connection is successful....."); } else { log.error("websocket connection is error....."); } executor.scheduleAtFixedRate(() -> { try { if (client.isClosed()) { boolean reconnectSuccess = client.reconnectBlocking(); if (reconnectSuccess) { log.info("websocket reconnect is successful....."); } else { log.error("websocket reconnection is error....."); } } } catch (InterruptedException e) { log.error("websocket connect is error :{}", e.getMessage()); } }, 10, 30, TimeUnit.SECONDS); } /* client.setProxy(new Proxy(Proxy.Type.HTTP, new InetSocketAddress("proxyaddress", 80)));*/ } catch (InterruptedException e) { log.info("websocket connection...exception....", e); } }
因此
soul-admin
,soul-bootstrap
项目启动完成,websocket
连接也建立成功了,接下来有数据变动,soul-admin
服务端就会向客户端发送消息,数据就及时的同步到内存中。参考资料
-
抓包分析Websocket连接建立的全过程
2020-11-27 20:46:28Websocket连接建立过程选择协议3次握手协议转换连接订阅消息推送与确认 选择协议 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下... -
websocket / 使用 wireshark 分析 websocket 连接过程
2020-07-07 11:03:32一、连接过程时序图 二、wireshark 分析 上图是一个完整的进行 websocket 连接时产生的数据包。 根据时序图可知,前 3 行是 tcp/ip 握手过程,因为可以通过标志来看到,前 3 个标志(Flags)分别为 SYN、SYN ... -
Websocket 连接过程,以及使用中要考虑的问题
2018-12-19 10:31:57WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据,就像 Socket一样,不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议; WebSocke... -
什么是websocket、websocket的优点以及它的连接过程
2020-09-23 15:21:18它是一个新的基于TCP的的应用层协议,只需要一次连接,以后的数据不需要重新建立连接,可以直接发送,它是基于TCP的,属于和HTTP相同的地位。 它的最大特点就是,服务器可以主动向客户端推送消息,客户端也可以主动... -
socket 及 websocket的握手过程
2019-11-14 14:40:27客户端开始建立WebSocket连接时要发送一个header标记了 Upgrade的HTTP请求,表示请求协议升级。所以服务器端做出响应的简便方法是,直接在现有的HTTP服务器软件和现有的端口上实现WebSocket协议,然后再回一个状态..... -
在vue中使用SockJS实现webSocket通信的过程
2020-12-03 04:33:54最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,...•尽可能快地建立连接 •客户端只是纯粹的JavaScript,不需要flash •客户端JavaScript必须经过严格的测试 •服务 -
WebSocket对象的“readyState”属性记录连接过程中的状态值
2019-10-08 11:48:55websocket的两个属性:readyState和bufferedAmount。 根据readyState属性可以判断webSocket的连接状态,该属性的值可以是下面...正在建立连接连接,还没有完成。The connection has not yet been established.... -
websocket是如何进行建立连接与通信的?(简单理解)
2018-11-11 14:09:00websocket-client端通过ws协议向websocket-server端发起连接请求前,首先在自己的请求头中添加Sec-Websocket-Key键值对,值为根据自己账号通过一定的方式生成的字符串,client端发送自己的key后,server端取出并... -
WebSocket与http长连接的区别
2018-05-31 08:14:02前言 事先说明这是鄙人看了...websocket连接过程概述 WebSocket 建立连接需要先通过一个 http 请求进行和服务端握手。握手通过后连接就建立并保持了。浏览器先发送请求: GET / HTTP/1.1 Host: localhost:8080 Ori... -
WebSocket通信过程
2019-04-09 20:31:14客户端与服务器建立连接 客户端通过session向服务器发送消息 服务器接收客户端的消息,调用服务器端的onMessage()方法包装、生成消息内容(新的消息包括客户端ID) 通过服务器通过循环调用sendMessage()方法来... -
Websocket通信过程
2019-02-22 10:44:001. 客户端与服务器建立连接 2. 客户端通过session向服务器发送消息 3. 服务器接收客户端的消息,调用服务器端的onMessage()方法包装、生成消息内容(新的消息包括客户端ID) 4. 通过服务器通过循环调用... -
Python3.6.1 websocket 需要传header来建立长连接 模拟的客户端 脚本编写
2018-04-09 16:16:47在做接口测试过程中,使用到了websocket 来建立长连接,尝试过使用Jmeter 工具来直接测试,不知道什么样的原因总是报 cannot connect to the remote server,但是实际上,server是可以remote上去的。并且诡异的是,... -
使用wireshark抓包分析浏览器无法建立WebSocket连接的问题(server为Alchemy WebSockets组件)...
2015-04-22 17:40:00工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用。 近日偶尔一次在本地调试,发现使用相同版本的Chrome浏览器,不可连接线上服务器的WS... -
websocket
2018-10-31 22:05:33让客户端与服务器保持长连接,在连接过程中双方可相互通讯。就有如视图serversocket建立tcp通讯一样。websocket让双方保持长连接的相互通讯。平常是,请求服务器,服务器响应数据。现在可以双方进行长连接通讯了 ... -
WebSocket
2020-07-02 23:45:41WebSocket是html5新提出来的,是web浏览器与web服务器之间的全双工通信标准。主要是为了解决ajax和comet里的xmlhttprequest附带的缺陷所引起的问题。...建立连接过程 1、客户端:发起协议升级请求 GET / HTTP/1.1 ... -
8.2 WebSocket
2021-02-14 11:43:24一个Web客户端只建立一个TCP连接 Websocket服务端可以推送(push)数据到web客户端. 有更加轻量级的头,减少数据传送量 WebSocket URL的起始输入是ws://或是wss://(在SSL上)。下图展示了WebSocket的通信过程,一个...
-
利用坐标变换分析塔差对编码器测角精度测试的影响
-
使用vue搭建微信H5公众号项目
-
DHCP 动态主机配置服务(在Linux环境下,配置单网段或跨网段提)
-
很多朋友都是从此绝交的,故事很短,却说穿了人性!
-
PHPUnit远程代码执行漏洞 CVE-2017-9841 漏洞复现
-
DevOps,不是一个传说!
-
nflgame:用于检索和读取NFL Game Center JSON数据的API。 它可以处理实时数据,可用于幻想足球-源码
-
深入理解分布式技术 - RocketMQ解析
-
Prisma初体验【逆向生成数据模型】
-
用一个比特币买一辆Model3?马斯克血洗空头后,苹果也要跟?
-
access应用的3个开发实例
-
nlp3
-
jtpm1是什么接口
-
千伏、微微秒光电子开关及其应用
-
移动界面隐喻设计
-
在 Linux 上构建企业级 DNS 域名解析服务
-
NFS 实现高可用(DRBD + heartbeat)
-
物联网基础篇:快速玩转MQTT
-
平面型四光纤耦合系统的研究
-
基于Qt的LibVLC开发教程