vue websocket 使用

基于webSocket通信的库主要有 socket.io,SockJS
关于SockJS的使用
先安装 sockjs-client 和 stompjs

npm install sockjs-client
npm install stompjs

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

export default {
    data () {
        return {
            
        }
    },
    methods: {
        // ws连接
        initWebsockt () {
          this.connection()
          // 断开重连,尝试发送消息
          this.socketTimer = setInterval(() => {
            try {
              this.stompClient.send('msg')
            } catch (err) {
              console.log('websocket 请求断开了:', err)
              this.connection()
            }
          }, 5000)
        },
        connection () {
          // 建立连接
          let socket = new SockJS('http://172.16.40.154:9000/messageWarning-websocket')
          // 获取stomp子协议的客户端对象
          this.stompClient = Stomp.over(socket)
          let headers = { Authorization:'' }
          // 发送websocket连接
          this.stompClient.connect(headers,(frame) => {
            console.log('frame is:', frame)
            // 订阅服务
            this.stompClient.subscribe('/topic/messageWarning', (msg) => {
              console.log('广播成功')
              console.log(msg);  // msg.body存放的是服务端发送给我们的信息
            },headers)
          }, (err) => {
              // 连接发生错误时的处理函数
              console.log('失败')
              console.log(err);
          });
        },
        disconnect () {
          if (this.stompClient) {
            this.stompClient.disconnect()
          }
        }
    }
    beforeDestroy () {
        this.disconnect()
        clearInterval(this.socketTimer)
    }
}

sockjs-client

    sockjs-client是从SockJS中分离出来的用于客户端使用的通信模块.所以我们就直接来看看SockJS. SockJS是一个浏览器的JavaScript库,它提供了一个类似于网络的对象,SockJS提供了一个连贯的,跨浏览器的JavaScriptAPI,它在浏览器和Web服务器之间创建了一个低延迟,全双工,跨域通信通道. 你可能会问,我为什么不直接用原生的WebSocket而要使用SockJS呢?这得益于SockJS的一大特性,一些浏览器中缺少对WebSocket的支持,因此,回退选项是必要的,而Spring框架提供了基于SockJS协议的透明的回退选项。SockJS提供了浏览器兼容性,优先使用原生的WebSocket,如果某个浏览器不支持WebSocket,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之上提供了一个基于帧的线路格式层,用来定义消息语义.

碰到的问题

    stomp.js:463 WebSocket connection to 'wss://${backend}/websocket' failed: Error during WebSocket handshake: Unexpected response code: 200

    解决方案:修改nginx配置
    部分参考 https://blog.csdn.net/hefeng_aspnet/article/details/142206508

    websocket Whoops! Lost connection to 'schema://${backend}/websocket'
    
    解决方案:后端添加jar包
    https://blog.csdn.net/AaronChen01/article/details/80019294

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/54299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 内置应用裁剪

文章目录 查询目标 APK 的 Android.mk(或 Android.bp)文件apk裁剪方式1.注释或删除.mk/.bp文件2.将 APK 名称加入“OVERRIDES”配置项中3.自定义“PRODUCT_PACKAGES_REMOVE”配置项 查询目标 APK 的 Android.mk(或 Android.bp)文件…

LabVIEW机械手视觉引导系统

开发了LabVIEW软件和硬件工具开发的高精度机械手视觉引导系统。系统通过高效的视觉识别和精确的机械操作,提升工业自动化领域的生产效率和操作精度。 项目背景: 随着工业自动化的不断发展,对生产效率和精确度的要求也日益增高。传统的机械手…

Linux 安装JDK8和卸载

目录 一、下载JDK8的rpm包 二、安装JDK 三、设置环境变量 Linux环境下安装JDK的方式有多种,可以通过rpm包、yum安装或者tar.gz压缩包。本章节会教大家通过前两者方式来安装JDK,压缩包的形式因为下载压缩包后上传到服务器环境下,将压缩包解…

Kafka支持SSL/TLS协议技术深度解析

一、Kafka支持SSL/TLS协议技术深度解析 1. SSL/TLS协议概述 SSL(Secure Socket Layer,安全套接层)及其继任者TLS(Transport Layer Security,传输层安全)是为网络通信提供安全及数据完整性的一种安全协议。…

Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】

Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】 目录 Unity 设计模式 之 【什么是设计模式】/ 【为什么要使用设计模式】/ 【架构和设计模式的区别】 一、简单介绍 二、 Unity 设计模式 1、Unity 开发中使用设计模式的特点 2…

【Qt网络编程】Tcp多线程并发服务器和客户端通信

目录 一、编写思路 1、服务器 (1)总体思路widget.c(主线程) (2)详细流程widget.c(主线程) (1)总体思路chat_thread.c(处理聊天逻辑线程&…

汇编(实现C语言程序的调用)

一、ARM汇编指令 mov: 将一个值或寄存器的内容移动到另一个寄存器中。这个指令可以用来赋值。 示例:mov r0, #5 // 将立即数 5 移动到寄存器 r0 add: 执行加法操作,将两个操作数相加,并将结果存储在目标寄存器中。 示例:add r0, …

【Elasticsearch系列十四】Elasticsearch

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

如何使用 Next.js 进行服务端渲染(Server-Side Rendering, SSR)

文章目录 前言步骤 1: 创建 Next.js 应用步骤 2: 创建页面组件示例页面组件 步骤 3: 自定义 _app.js 文件步骤 4: 自定义 _document.js 文件步骤 5: 运行应用步骤 6: 构建和部署总结 前言 Next.js 本身就支持 SSR 并提供了一系列内置的方法来简化这个过程。下面将详细介绍如何使…

MySQL:事务的ACID特性隔离级别脏读、不可重复读、幻读、Next-Key锁——场景复现

目录 1、什么是事务 2、 事务的ACID特性 2.1 事务的隔离性 3、为什么要使用事务? 4、查看支持事务的存储引擎 5、使用事务 5.1 控制事务 5.1.1 开启事务 5.1.2 关闭事务 5.2 开始一个事务,执行修改后回滚 5.3 开始一个事务,执行修…

使用Addressables+SpriteAtlas打包产生冗余

1)使用AddressablesSpriteAtlas打包产生冗余 2)使用SBP打AssetBundle脚本引用丢失 3)Unity构建后处理(IPostprocessBuildWithReport等接口)抛出异常后,构建不会停止 4)Unity 2022.3.0版本使用Oc…

谷歌论文提前揭示o1模型原理:AI大模型竞争或转向硬件

Open AI最强模型o1的护城河已经没有了?仅在OpenAI发布最新推理模型o1几日之后,海外社交平台 Reddit 上有网友发帖称谷歌Deepmind在 8 月发表的一篇论文内容与o1模型原理几乎一致,OpenAI的护城河不复存在。 谷歌DeepMind团队于今年8月6日发布…

svn 1.14.5

svn1.14.5包 https://download.csdn.net/download/weixin_42120669/89765533 svn1.14.5汉化包64位 https://download.csdn.net/download/weixin_42120669/89765533 1.14.2包,含有汉化包 https://download.csdn.net/download/weixin_42120669/89765647

我的AI工具箱Tauri版-VideoClipMixingCut视频批量混剪

本教程基于自研的AI工具箱Tauri版进行VideoClipMixingCut视频批量混剪。 VideoClipMixingCut视频批量混剪 是自研AI工具箱Tauri版中的一款强大工具,专为自动化视频批量混剪设计。该模块通过将预设的解说文稿与视频素材进行自动拼接生成混剪视频,适合需要…

数据结构 ——— 算法的时间复杂度

目录 时间复杂度的概念 时间复杂度函数式 大O的渐进表示法的概念 大O的渐进表示法 时间复杂度的概念 在计算机科学中,算法的时间复杂度是一个函数(数学上的函数式),它定量描述了该算法的运行时间,一个算法执行所耗…

java工具安装教程

提示:先安装软件打开后关闭,在执行魔法操作 解压后会多个文件夹,从文件夹打开 要魔法哪款软件就打开对应的魔法脚本 比如:idea就运行idea魔法 点击打开 显示下面弹窗则成功,点击确定即可 打开IDEA查看:

Arthas thread(查看当前JVM的线程堆栈信息)

文章目录 二、命令列表2.1 jvm相关命令2.1.2 thread(查看当前JVM的线程堆栈信息)举例1:展示[数字]线程的运行堆栈,命令:thread 线程ID举例2:找出当前阻塞其他线程的线程 二、命令列表 2.1 jvm相关命令 2.…

面试题高频之token无感刷新(vue3+node.js)

无感刷新的基本原理 使用刷新令牌(refresh token): ○ 应用程序在首次登录成功后会获得一个访问令牌(access token)和一个刷新令牌(refresh token)。 ○ 访问令牌通常有较短的有效期&#xff0…

人工智能 | 基于ChatGPT开发人工智能服务平台

简介 ChatGPT 在刚问世的时候,其产品形态就是一个问答机器人。而基于ChatGPT的能力还可以对其做一些二次开发和拓展。比如模拟面试功能、或者智能机器人功能。 模拟面试功能包括个性化问题生成、实时反馈、多轮面试模拟、面试报告。 智能机器人功能提供24/7客服支…

Python习题 190:用类编写一个年会抽奖程序

(编码题)用 Python 的类编写一个年会抽奖程序,要求: 公司员工的名单用 Faker 来模拟构造,要求有姓名、部门(自己编写几个随机指定)、工号,名单数据类型为 pandas 的 DataFrame 类型 在抽奖项目的类中,有两个属性,一个是奖池,即要参与抽奖的员工名单,一个是获奖名单…