websocket+sockjs+stompjs详解及实例代码


Posted in HTML / CSS onNovember 30, 2018

最近有项目需求要用到websocket,刚开始以为很简单,但是随着遇到问题,深入了解,才知道websocket并不是想象中的那么简单,这篇文章主要是考虑websocket在客户端的使用。

1.http与websocket

http超文本传输协议,大家都非常熟悉,http有1.0、1.1、 2.0几个版本,从http1.1起,默认都开启了Keep-Alive,保持连接持续性,简单地说,当一个网页打开完成后,客户端和服务器之间用于传输http数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接,这样就降低了资源的消耗优化性能,但是Keep-Alive也是有时间限制的,还有一个客户端只能主动发起请求才能获取返回数据,并不能主动接收后台推送的数据,websocket便应运而生。

websocket 是html5新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决 http 请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。

http与websocket都是基于TCP(传输控制协议)的,websocket可以看做是对http协议的一个补充

2.SockJs

SockJS是一个JavaScript库,为了应对许多浏览器不支持WebSocket协议的问题,设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API,但如果WebSocket 技术不可用的话,会自动降为轮询的方式。

3.Stompjs

STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议。

SockJS 为 WebSocket 提供了 备选方案。但无论哪种场景,对于实际应用来说,这种通信形式层级过低。 STOMP协议,来为浏览器 和 server 间的 通信增加适当的消息语义。

4.WebSocket、SockJs、STOMP三者关系

简而言之,WebSocket 是底层协议,SockJS 是WebSocket 的备选方案,也是底层协议,而 STOMP 是基于 WebSocket(SockJS)的上层协议。

1、HTTP协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节,假设 HTTP 协议 并不存在,只能使用 TCP 套接字来 编写 web 应用。

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

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

5.使用实例

安装 sockjs-client、stompjs;在这儿要注意一下,我在"stompjs": "^2.3.3"这个版本发现,引入stompjs会报一个net模块找不到,需要在stompjs模块根目录下执行npm install,这个是个奇葩的问题。

引入模块:

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

// 连接函数
let number = 1;
function reconnect(socketUrl) {
    let url = `${BASE_URL}/ws/sdfpoint`; //连接地址
    // 建立连接对象(还未发起连接)
    let socket = new SockJS(url);
    // 获取 STOMP 子协议的客户端对象
    let stompClient = Stomp.over(socket);
    // 向服务器发起websocket连接并发送CONNECT帧
    stompClient.connect(
        {},//可添加客户端的认证信息
        function connectCallback (){//连接成功的回调函数
            //订阅频道
            stompClient.subscribe('/topic/display/control', function(data){
                if (data) {
                    console.log('subscribe data',data);
                }
            })
        },
        function errorCallBack(error){  
        //连接失败时再次调用函数
            number += 1;
            if(number<=10){
                reconnect(url);
            }
            console.log('error',error);
        }
    )     
}

总结:websocket 的实现客户端看起来比较简单,但是需要与后台进行很好的配合和调试才能达到最佳效果。通过SockJS、Stomp来进行浏览器兼容,增加消息语义,增强了可用性。要彻底搞懂websocket,我们还需要深入了解一些底层的原理以及相关的知识。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3属性选择符介绍
Oct 17 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
免费获得微软MCSD证书赶快行动吧!
Nov 13 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
HTML5拖拉上传文件的简单实例
Jan 11 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 HTML / CSS
纯CSS实现hover图片pop-out弹出效果的实例代码
Apr 16 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 #HTML / CSS
HTML5 Geolocation API的正确使用方法
Dec 04 #HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 #HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 #HTML / CSS
webapp字号大小跟随系统字号大小缩放的示例代码
Dec 26 #HTML / CSS
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
Jan 05 #HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 #HTML / CSS
You might like
php下检测字符串是否是utf8编码的代码
2008/06/28 PHP
javascript之对系统的toFixed()方法的修正
2007/05/08 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery的ready方法实现原理分析
2016/10/26 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
使用gulp搭建本地服务器并实现模拟ajax
2017/04/05 Javascript
JavaScript闭包原理与用法学习笔记
2020/05/29 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
详解用python写一个抽奖程序
2019/05/10 Python
Pandas0.25来了千万别错过这10大好用的新功能
2019/08/07 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
python 安装impala包步骤
2020/03/28 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python实现文字版扫雷
2020/04/24 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
文员岗位职责
2013/11/09 职场文书
保研推荐信
2014/05/09 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
2015年度物业公司工作总结
2015/04/27 职场文书
同学聚会感言一句话
2015/07/30 职场文书
装修安全责任协议书
2016/03/22 职场文书
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript