精华内容
下载资源
问答
  • webSocket建立连接过程

    千次阅读 2017-06-08 09:41:17
    webSocket是用来解决B/S模式中长连接的问题,实现浏览器和服务器间的消息推送和接收。浏览器先发送http报文,借用了http协议来完成一部分握手,这个http报文中有这么一段信息"Upgrade:websocket",这是告诉服务器...
    webSocket有些乱,整理一下:
    webSocket是用来解决B/S模式中长连接的问题,实现浏览器和服务器间的消息推送和接收。浏览器先发送http报文,借用了http协议来完成一部分握手,这个http报文中有这么一段信息"Upgrade:websocket",这是告诉服务器"你好,我要切换协议"。服务器接收后,回复一个http报文,告诉浏览器"好的,我已经切换到websocket协议了"。从这里以后就不用http报文了,接下来就完全按照websocket协议进行了。
    展开全文
  • 发送消息: 接收消息: (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:39
    websocket 连接建立需要借助 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 进行数据同步的,今天来分析下,websocket 连接是什么时候建立的。 上一篇也讲到,启动 soul-admin 时,因为 yml 配置了使用 websocket 进行同步,会加载这三个类,...

    上一篇讲到 soul 是如何使用 websocket 进行数据同步的,今天来分析下,websocket 连接是什么时候建立的。

    上一篇也讲到,启动 soul-admin 时,因为 yml 配置了使用 websocket 进行同步,会加载这三个类,WebsocketCollector 这个类就是开启一个 websocket 服务。

    soul-bootstrappom 文件引入了这个 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-websocketresources/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();
        }
    }
    

    在下面这个类里,使用的是ObjectProvidergetIfAvailable(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-adminsoul-bootstrap 项目启动完成,websocket 连接也建立成功了,接下来有数据变动,soul-admin 服务端就会向客户端发送消息,数据就及时的同步到内存中。

    参考资料

    spring ObjectProvider 源码分析

    展开全文
  • Websocket连接建立过程选择协议3次握手协议转换连接订阅消息推送与确认 选择协议 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下...
  • 一、连接过程时序图 二、wireshark 分析 上图是一个完整的进行 websocket 连接时产生的数据包。 根据时序图可知,前 3 行是 tcp/ip 握手过程,因为可以通过标志来看到,前 3 个标志(Flags)分别为 SYN、SYN ...
  • WebSocket是一种双向通信协议,在建立连接后,WebSocket服务器和Browser/UA都能主动的向对方发送或接收数据,就像 Socket一样,不同的是WebSocket是一种建立在Web基础上的一种简单模拟Socket的协议; WebSocke...
  • 它是一个新的基于TCP的的应用层协议,只需要一次连接,以后的数据不需要重新建立连接,可以直接发送,它是基于TCP的,属于和HTTP相同的地位。 它的最大特点就是,服务器可以主动向客户端推送消息,客户端也可以主动...
  • socket 及 websocket的握手过程

    千次阅读 2019-11-14 14:40:27
    客户端开始建立WebSocket连接时要发送一个header标记了 Upgrade的HTTP请求,表示请求协议升级。所以服务器端做出响应的简便方法是,直接在现有的HTTP服务器软件和现有的端口上实现WebSocket协议,然后再回一个状态.....
  • 最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,...•尽可能快地建立连接 •客户端只是纯粹的JavaScript,不需要flash •客户端JavaScript必须经过严格的测试 •服务
  • websocket的两个属性:readyState和bufferedAmount。 根据readyState属性可以判断webSocket的连接状态,该属性的值可以是下面...正在建立连接连接,还没有完成。The connection has not yet been established....
  • websocket-client端通过ws协议向websocket-server端发起连接请求前,首先在自己的请求头中添加Sec-Websocket-Key键值对,值为根据自己账号通过一定的方式生成的字符串,client端发送自己的key后,server端取出并...
  • 前言 事先说明这是鄙人看了...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:00
    1. 客户端与服务器建立连接 2. 客户端通过session向服务器发送消息 3. 服务器接收客户端的消息,调用服务器端的onMessage()方法包装、生成消息内容(新的消息包括客户端ID) 4. 通过服务器通过循环调用...
  • 在做接口测试过程中,使用到了websocket建立连接,尝试过使用Jmeter 工具来直接测试,不知道什么样的原因总是报 cannot connect to the remote server,但是实际上,server是可以remote上去的。并且诡异的是,...
  • 工作时使用了Websocket技术,在使用的过程中发现,浏览器(Chrome)升级后可能会导致Websocket不可用,更换浏览器后可以正常使用。 近日偶尔一次在本地调试,发现使用相同版本的Chrome浏览器,不可连接线上服务器的WS...
  • websocket

    2018-10-31 22:05:33
    让客户端与服务器保持长连接,在连接过程中双方可相互通讯。就有如视图serversocket建立tcp通讯一样。websocket让双方保持长连接的相互通讯。平常是,请求服务器,服务器响应数据。现在可以双方进行长连接通讯了  ...
  • WebSocket

    2020-07-02 23:45:41
    WebSocket是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的通信过程,一个...

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 188
精华内容 75
热门标签
关键字:

websocket建立连接过程