精华内容
参与话题
问答
  • SockJS简单介绍

    万次阅读 2017-10-11 20:46:13
    SockJS是一个浏览器JavaScript库,它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API,它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。

    一、定义

    SockJS是一个浏览器JavaScript库,它提供了一个类似于网络的对象。SockJS提供了一个连贯的、跨浏览器的Javascript API,它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域通信通道。

    二、产生的原因

    一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的,而Spring框架提供了基于SockJS协议的透明的回退选项。

    SockJS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket,如果在不支持websocket的浏览器中,会自动降为轮询的方式。
    除此之外,spring也对socketJS提供了支持。

    如果代码中添加了withSockJS()如下,服务器也会自动降级为轮询。

    registry.addEndpoint("/coordination").withSockJS();

    SockJS的目标是让应用程序使用WebSocket API,但在运行时需要在必要时返回到非WebSocket替代,即无需更改应用程序代码。

    SockJS是为在浏览器中使用而设计的。它使用各种各样的技术支持广泛的浏览器版本。对于SockJS传输类型和浏览器的完整列表,可以看到SockJS客户端页面。
    传输分为3类:WebSocket、HTTP流和HTTP长轮询(按优秀选择的顺序分为3类)

    三、使用

    • SockJS 很容易通过 Java 配置启用
    @Configuration
    @EnableWebSocket
    public class WebSocketConfig implements WebSocketConfigurer {
    
        @Override
        public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
            registry.addHandler(myHandler(), "/myHandler").withSockJS();
        }
    
        @Bean
        public WebSocketHandler myHandler() {
            return new MyHandler();
        }
    
    }

    与之等价的XML配置:

    <beans xmlns="http://www.springframework.org/schema/beans"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xmlns:websocket="http://www.springframework.org/schema/websocket"
        xsi:schemaLocation="
            http://www.springframework.org/schema/beans
            http://www.springframework.org/schema/beans/spring-beans.xsd
            http://www.springframework.org/schema/websocket
            http://www.springframework.org/schema/websocket/spring-websocket.xsd">
    
        <websocket:handlers>
            <websocket:mapping path="/myHandler" handler="myHandler"/>
            <websocket:sockjs/>
        </websocket:handlers>
    
        <bean id="myHandler" class="org.springframework.samples.MyHandler"/>
    
    </beans>
    • 打开一个连接,为连接创建事件监听器,断开连接,消息时间,发送消息返回到服务器,关闭连接。
    <script src="//cdn.jsdelivr.net/sockjs/1.0.0/sockjs.min.js"></script>
    
    var sock = new SockJS('/coordination');  
    sock.onopen = function() {
        console.log('open');
    };
    sock.onmessage = function(e) {
        console.log('message', e.data);
    };
    sock.onclose = function() {
        console.log('close');
    };
    sock.send('test');
    sock.close();

    四、心跳消息

    SockJS协议要求服务器发送心跳消息,以阻止代理结束连接。Spring SockJS配置有一个名为“心脏节拍时间”的属性,可用于定制频率。默认情况下,如果没有在该连接上发送其他消息,则会在25秒后发送心跳。

    当在websocket/SockJS中使用STOMP时,如果客户端和服务器通过协商来交换心跳,那么SockJS的心跳就会被禁用。

    Spring SockJS支持还允许配置task调度程序来调度心跳任务。

    五、Servlet 3异步请求

    HTTP流和HTTP长轮询SockJS传输需要一个连接保持比平常更长时间的连接。
    在Servlet容器中,这是通过Servlet 3的异步支持完成的,这允许退出Servlet的容器线程处理一个请求,并继续从另一个线程中写入响应。

    六、SockJS的CROS Headers

    如果允许跨源请求,那么SockJS协议使用CORS在XHR流和轮询传输中跨域支持。

    展开全文
  • sockjs.js完整

    2017-06-04 17:14:14
    sockjs.js
  • sockjs-web实时通信协议

    万次阅读 2015-06-22 15:12:12
    sockjs-web实时通讯应用解决方案 socksjs目标 客户端和服务器端api尽可能简洁,尽量靠近websocket api 支持服务端扩展和负载均衡技术 传输层应该全面支持跨域通信 如果收到代理服务器的限制,传输层能优雅地从...

    sockjs-web实时通信应用解决方案

    socksjs

    • 客户端和服务器端api尽可能简洁,尽量靠近websocket api
    • 支持服务端扩展和负载均衡技术
    • 传输层应该全面支持跨域通信
    • 如果受到代理服务器的限制,传输层能优雅地从一种方式回退到另一种方式
    • 尽可能快地建立连接
    • 客户端只是纯粹的JavaScript,不需要flash
    • 客户端JavaScript必须经过严格的测试
    • 服务器端代码尽可能简单,降低用另一种语言重写server的代价

    实际上sockjs的目标也就是sockjs具有的特点。

    SockJS: WebSocket emulation done right一文中对sockjs的特点进行了具体阐述。

    sockjs几个特点,非常值得一提

    跨域通信

    sockjs服务器端支持跨域通信,意味着我们可以将sockjs server独立出来,把它放在与web主站点不同的域名之上,实际上这是比较合理的部署策略。关于跨域,也是一个比较大的话题,其中有一个机制叫cors(跨域资源共享)主要解决JavaScript不能跨域请求的问题。sockjs服务器应该支持这种机制。

    负载均衡

    无论server端优化得再好,一个sockjs server的处理能力都是有限的,我们更需要的是一种可扩展的解决方案。一种非常简单的方法是把每一个sockjs server放到一个不同的域名之下,如sockjs1.example.com和sockjs2.example.com,允许客户端随机选择一个server。

    Prefix-based sticky sessions

    在sockjs中,一个典型的url如下:

    http://localhost:8000/chat/<serverid>/<sessionid>/

    url中的第二个参数sessionid,必须是一个随机字符串,唯一标识一个session。第一个参数serverid,主要应用于负载均衡目的。负载均衡器可以利用这个serverid参数作为一个线索,进行负载均衡分流。具体使用方面,参考HAProxy的一个配置参考文件,其中关键的配置在于

    balance uri depth 2

    另外一种负载均衡配置方案,主要利用含有jsessionid的cookie。这个cookie由socketjs server进行设置,当response到达负载均衡器的时候,jessionid会被加上一个额外的前缀或者后缀,具体原理方面可以参考阅读
    LOAD BALANCING, AFFINITY, PERSISTENCE, STICKY SESSIONS: WHAT YOU NEED TO KNOW一文。

    健壮的传输协议

    我们知道html5 的websocket协议定义了websocket api使得网页可以利用websocket协议和远端主机进行全双工通信。websocket协议应该是最快,最好的web通信协议,已被大多数的浏览器所支持。那么为什么还需要sockjs进行封装?

    在真实的网络世界中,实际上有着非常复杂的网络拓扑结构,在浏览器和server之间,含有很多的中间节点,包括路由器,代理服务器,反向代理服务器,负载均衡器等等。即使html5 websocket协议已经成为了标准,但是这些中间节点并不一定会遵守这些标准,还有很大可能会阻止websocket handshake的过程,结果无法建立websocket连接。

    How HTML5 Web Sockets Interact With Proxy Servers一文中提到了websocket协议和代理服务器的“不友善关系”,源于代理服务器对websocket handshake的阻挠和对长连接,空闲连接的关闭处理,让我们看到了如果只是直接利用websocket协议,实在是困难重重。

    sockjs的出现,实际是为了解决这个问题,使得人们可以建立健壮的web实时通信程序。

    sockjs服务器传输协议不仅提供了websocket协议的支持,还提供了流传输Streaming和轮询Polling ,其中又包括多种底层传输方案,如:
    xhrxhr_streamingjsonpeventsourcehtmlfile。每一种传输方案,其实都值得开辟一个章节来大写特写。

    如果浏览器客户端js,采用websocket连接不上服务器,它可以回退选择其他传输方案,那么确保总可以利用一种传输协议,连接到服务器。那么开发者就不需要理睬那些可恶的中间节点了。

    推荐阅读

    展开全文
  • SockJS

    千次阅读 2018-12-01 23:15:22
    文章目录实时通信Ajax轮询HTTP长轮询WebSocketSockJSsockjs-clientstomjsSTOMP与WebSocket 的关系参考文章 实时通信 ... 实现实时通信,我们通常有三种方法: Ajax轮询 ajax轮询的原理非常简单,让浏览器每隔几秒就像...

    实时通信

    传统的Http协议是无法实现实时通信(Instant Message)的。

    实现实时通信,我们通常有三种方法:

    Ajax轮询

    ajax轮询的原理非常简单,让浏览器每隔几秒就像服务器发送一个请求,询问服务器是否有新的信息.

    HTTP长轮询

    长轮询的机制和ajax轮询差不多,都是采用轮询的方式,不过才去的是阻塞模型(一直打电话,没收到就不挂电话),也就是说,客户端发起链接后,如果没有消息,就一直不返回response给客户端.知道有新的消息才返回,返回完之后,客户端再此建立连接,周而复始.

    WebSocket

    WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议.在WebSocket API中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送,不需要繁琐的询问和等待.


    从上面的介绍很容易看出来,Ajax轮询和长轮询都是非常耗费资源的,Ajax轮询需要服务器有很快的处理速度和资源,HTTP长轮询需要有很高的并发,也就是同时接待客户的能力。而WebSocket,只需要经过一次HTTP请求,就可以与服务端进行源源不断的消息收发了。

    SockJS

    WebSocket虽好,但一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的。

    SockJS和socket.io都是对WebSocket的模拟。

    这次介绍的是SockJS。

    SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟、全双工、跨域通信通道。

    SockJS的一大好处在于提供了浏览器兼容性。即优先使用原生WebSocket,如果浏览器不支持WebSocket,会自动降为轮询的方式。

    sockjs-client

    sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块。

    stomjs

    STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议。

    WebSocket是一个消息架构,不强制使用任何特定的消息协议,它依赖于应用层解释消息的含义。

    与HTTP不同,WebSocket是处在TCP上非常薄的一层,会将字节流转化为文本/二进制消息,因此,对于实际应用来说,WebSocket的通信形式层级过低,因此,可以在 WebSocket 之上使用STOMP协议,来为浏览器 和 server间的 通信增加适当的消息语义。

    STOMP与WebSocket 的关系

    HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节,假设HTTP协议不存在,只能使用TCP套接字来编写web应用,你可能认为这是一件疯狂的事情。

    直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议,就需要我们定义应用间发送消息的语义,还需要确保连接的两端都能遵循这些语义。

    同HTTP在TCP套接字上添加请求-响应模型层一样,STOMP在WebSocket之上提供了一个基于帧的线路格式层,用来定义消息语义.

    参考文章

    [1] 在vue中使用SockJS实现webSocket通信
    [2] SockJS的简单介绍

    展开全文
  • sockjs.min.js

    2018-10-31 15:21:23
    压缩包内包含,sockjs.min.js,stomp.min.js等websocket 需要的js文件
  • 基于 SockJS 的 WebSocket 在学习 《Spring实战》 第18章的时候才知道,原来在不支持WebSocket的情况下,也可以很简单地实现WebSocket的功能的,方法就是使用 SockJS。它会优先选择WebSocket进行连接,但是当服务器...

    基于 SockJS 的 WebSocket

    在学习 《Spring实战》 第18章的时候才知道,原来在不支持WebSocket的情况下,也可以很简单地实现WebSocket的功能的,方法就是使用 SockJS。它会优先选择WebSocket进行连接,但是当服务器或客户端不支持WebSocket时,会自动在 XHR流、XDR流、iFrame事件源、iFrame HTML文件、XHR轮询、XDR轮询、iFrame XHR轮询、JSONP轮询 这几个方案中择优进行连接。

    幸运的是,我们不需要知道这些方案都代表什么,只需要简单地设置就可以使用了

    服务端

    在启动WebSocket的配置中,你需要做的所有事情就是加上 withSockJS()

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {
        // withSockJS 声明启用支持 sockJS
        webSocketHandlerRegistry.addHandler(marcoHandler(), "/echo").withSockJS();
    }
    

    客户端

    在客户端需要引入SockJS库,然后把 new WebSocket(url); 替换成 new SockJS(url);

    SockJS类和WebSocket类是兼容的,所以可以直接替换

    <script type="text/javascript" src="/resources/js/sockjs-1.0.0.min.js"></script>
    var sock = new SockJS(url);
    

    需要做的事情就是这么多

    效果展示

    支持WebSocket

    当浏览器和服务器都支持 websocket 的时候,直接使用websocket连接

    正常情况

    不支持WebSocket

    不支持WebSocket的场景有:

    1. 浏览器不支持
    2. Web容器不支持,如tomcat7以前的版本不支持WebSocket
    3. 防火墙不允许
    4. Nginx没有开启WebSocket支持

    当遇到不支持WebSocket的情况时,SockJS会尝试使用其他的方案来连接,刚开始打开的时候因为需要尝试各种方案,所以会阻塞一会儿,之后可以看到连接有异常,那就是尝试失败的情况。

    为了测试,我使用Nginx做反向代理,把www.test.com指到项目启动的端口上,然后本地配HOST来达到模拟真实场景的效果。因为Nginx默认是不支持WebSocket的,所以这里模拟出了服务器不支持WebSocket的场景。

    不支持WebSocket的情况

    完整实例

    完整的实例已经上传到GitHub上,你可以查看。如果对你有帮助,记得 Star 哦!

    https://github.com/dadiyang/springws

    展开全文
  • sockjs需要的两个js

    2019-02-26 13:25:59
    sockjs需要的两个js,
  • sockjs/sockjs-client

    2019-10-06 01:00:19
    sockjs/sockjs-client sockjs/sockjs-clientSockJS family: SockJS-client JavaScript client library SockJS-node Node.js server SockJS-erl...
  • 这里接收推送消息我们需要使用sockjs的固定存储库:sockjs-client。这里讲解客户端如何使用sockjs-client接收消息推送。什么是SockJSSockJS是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全...
  • npm install sockjs-client --save npm install stompjs --save 引入 import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; 使用 this.socket = new SockJS(`/iot-mdg/gs-topic-web...
  • 1. 什么是sockjs和stompjs Sock.js(处理兼容性) 支持浏览器:html5的协议,所以老浏览器不支持 兼容怎么办? Sock.js来了 Sock.JS的一大好处在于提供了浏览器兼容性。优先使用原生WebSocket,如果在不支持...
  • 参考: https://www.jianshu.com/p/b8aa70bf1340 import * as SockJS from 'sockjs-client'; import * as Stomp from 'stompjs';
  • 前端项目-sockjs-client,SockJS客户机是一个浏览器JavaScript库,它提供类似WebSocket的对象。SockJS为您提供了一个连贯的跨浏览器JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟、全双工、跨域的通信...
  • 控制台忽然报错出现了好几条这个警告提示, 其实只要 安装并加上对应的配置就好了 devtool: 'inline-source-map’ 完整代码如下 module.exports = { entry: { index: './src/index.js', another: './src/...
  • 网上试了很多都没有用 甚至在node都安装包下都没有找的相应文件。...find / -name "sockjs.js" 发现是谷歌浏览器某个插件里有引用sockjs.js 卸载了这个插件 浏览器恢复正常。不再重复发送。 希望能帮到你们。 ...
  • Node.JS Server SockJS-node

    千次阅读 2018-08-11 09:28:47
    SockJS-node is a Node.js server side counterpart of SockJS-client browser library written in CoffeeScript. To install sockjs-node run: npm install sockjs (If you see rbytes depe...
  • 首先sockjs-node是一个JavaScript库,提供跨浏览器 JavaScript 的 API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。...客户端:sockjs-clien(https://github.com/sockjs/sockjs-client) ...
  • 首先先上图 ...1. 找到/node_modules/sockjs-client/dist/sockjs.js 2.找到代码的 1605行 try { // self.xhr.send(payload); 把这里注掉 } catch (e) { self.emit('finish', 0, ''); self._clea...
  • 首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。...客户端:sockjs-clien(https://github.com/sockjs/sockjs-client) 如...
  • 本地运行项目后一直报错 sockjs.js:1605 GET ...sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览...
  • 使用vue脚手架 遇到 sockjs-node/info 这个接口请求 看起来很不舒服 怎么处理 ... node_modules/sockjs-client/dist/文件夹下面sockjs.js 找到1605行 把self.xhr.send(payload); ...
  • sockjs-0.3.min.js

    2018-05-04 15:37:28
    某些可恶的浏览器,暂不支持websocket请求,则需要使用socketjs模拟websocket的连接
  • 一、找到项目路径下的node_modules 目录 二、进入改文件夹\node_modules\sockjs-client\dist\sockjs.js 文件 把下面这段注释掉 收工
  • vue sockjs-node报错

    千次阅读 2019-09-12 17:54:37
    VUE本地跑项目时,有时候会出现如下的错误: 这个时候,只要关闭这个调用即可: 路径:node_modules/sockjs-client/dist/sockjs.js 代码1605行,注释self.xhr.send(payload); ...
  • sockjs-node接口报错解决方案

    千次阅读 2019-11-14 15:59:59
    上网查找报错原因,发现sockjs-node为nodejs热加载用于浏览器和本地通信的接口,此时热加载功能失效。因此判断错误原因为:此通信接口访问到的是nginx代理的9097端口而不是实际服务启动的8082端口,因此无法进行通信...
  • SpringBoot+sockjs client+stompjs实现websocket 什么是sockjs-clientsockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了...
  • vue/cle3项目运行报错sockjs-node/info解决方案 在这篇文章中: bug复现 webpack.config.js的目前配置如下: 报错分析 解决方案 1. 注释法 2. 配置vue.config bug复现   继上次将vue项目脚手架工具从...
  • sockjs-node/info?t=报错解决

    千次阅读 2019-10-05 01:47:39
    早上上班npm run serve启动项目,然后就看到了控制台一直报错: 本人表示很崩溃,昨天还没有报这个跨域问题,今天突然就o(╥﹏╥)o ...首先sockjs-node是一个JavaScript库,提供跨浏览器JavaScr...
  • 在使用vue-cli脚手架创建项目的时候,在cnpm create app命令后,项目创建成功后通过npm run serve命令运行以后,控制台报错,sockjs.js?9be2:1606 GET ...
  • sockjs-node/info?t=报错,是一个跨域问题 从网上看的这个人的文章解决的,这里是他的文章的图片 查看Network看到是info接口报错,我项目中没有调用过该项目,然后百度查询sockjs-node/info?t=1562204191563, 首先...

空空如也

1 2 3 4 5 ... 20
收藏数 4,572
精华内容 1,828
关键字:

sockjs