uniapp使用@microsoft/signalr(报错“ReferenceError: require is not defined“)

后台老哥要用微软的signalr,总结了一些经验和问题

引入方法

1、npm

npm i @microsoft/signalr

2、下载他的js或者cdn

<script src="https://cdnjs.cloudflare.com/ajax/libs/microsoft-signalr/6.0.1/signalr.js"></script>

在uniapp中,h5是正常的,运行到App会报ReferenceError: require is not defined
在这里插入图片描述
可以使用renderjs

用法不想看可以直接复制

<script module="test" lang="renderjs">import * as signalR from "@microsoft/signalr";export default {data() {return {connection: null}},mounted() {// 建立连接console.log(signalR)this.connection = new signalR.HubConnectionBuilder().withUrl("xxxxx") // 此处填服务器地址.configureLogging(signalR.LogLevel.Information).build();// 注册方法(给后端调用的,需要在methods中定义)// this.connection.on("ReceiveMessage", this.ShowMsg);// 开始连接this.connection.start().then((res) => {console.log("Connected!a")this.$ownerInstance.callMethod('isConnected', {connected: true})this.connection.invoke("SendMessage", "hello world")}).catch((err) => {console.log(err)});return}}
</script>

注:可以直接新建一个script 标签,放在原页面script 标签的下面,像这样。
在这里插入图片描述

顺道写下使用方法 signalr文档,不太友好

注:在renderjs中,uni的东西都不可以使用
先引入。或者使用上面那种引入

import {HubConnectionBuilder} from "@microsoft/signalr";

建立连接
withAutomaticReconnect()这个是自动断线重连,就简单测试了一下是有用的所以不需要自己写心跳。

// 建立连接this.connection = new HubConnectionBuilder().withUrl(url) // 此处填服务器地址// .configureLogging(signalR.LogLevel.Information).withAutomaticReconnect().build();

开始连接
有成功和失败的回调

this.connection.start().then(() => {console.log('Connection established.');}).catch((error) => {console.error('Error connecting to SignalR server: ', error);});

调用SignalR服务器端的方法
第一个是方法名称,后面具体参数看后台

this.connection.invoke('serverMethod', data).then((response) => {console.log('Received response from SignalR server: ', response);}).catch((error) => {console.error('Error calling server method: ', error);});

接收服务器返回值
通过on来接收,第一个是方法名称

this.connection.on("ReceiveMessage",(res)=>{})

具体推送可以写在上面,推送文档 plus.push
注:需要在打包的时候勾选uni.push

let content = JSON.parse(message).name +'有一条新的危急值消息!';let options = {"cover": false,"when": new Date(),'title': "危急值"};let body = {'id': 'id','key': "key"}// let payload = JSON.stringify(body);plus.push.createMessage(content, '', options);

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

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

相关文章

Python vs C#:首先学习哪种编程语言最好?

进入编码可能很困难。 最艰难的部分? 决定先学什么语言。 当谈到 Python 与 C# 时,可能很难知道在您的决定中要考虑哪些因素。 我们为您提供了有关这些全明星编程语言的所有信息。 什么是 C#? 自 2000 年作为 Microsoft Visual Studio 的一部分开发 C# 以来,它一直是开发人…

Postman使用_Tests Script(断言测试)

断言测试可以在Collection、Folder和Request的 pre-request script 和 test script中编写&#xff0c;测试脚本可以检测请求响应的各个方面&#xff0c;包括正文、状态代码、头、cookie、响应时间等&#xff0c;只有测试符合自定义的要求后才能通过。 pm对象提供了测试相关功能…

常用的8位单片机+2.4g遥控芯片的“化学”反应

8位单片机通常是微控制器&#xff0c;它们具有相对简单的处理能力&#xff0c;但对于许多嵌入式系统和低复杂度应用而言&#xff0c;它们足够使用。这些芯片通常具有较低的功耗&#xff0c;价格相对实惠。 2.4GHz无线通信芯片&#xff0c;则具备强大的无线通信能力。它们可以实…

windows 下docker安装宝塔镜像 宝塔docker获取镜像

1. docker 安装宝塔 打开链接&#xff1a;https://www.docker.com/get-started&#xff0c;找对应的版本下载docker&#xff0c;安装docker打开百度云盘&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1DGIjpKkNDAmy4roaKGLA_w 提取码&#xff1a;u8bi 2. 设置镜像 点…

java设计模式之观察者模式

. 基本概念 观察者&#xff08;Observer&#xff09;模式中包含两种对象&#xff0c;分别是目标对象和观察者对象。在目标对象和观察者对象间存在着一种一对多的对应关系&#xff0c;当这个目标对象的状态发生变化时&#xff0c;所有依赖于它的观察者对象都会得到通知并执行它…

1、MongoDb综述

1. MongoDb综述 1.1. 什么是Nosql NoSQL&#xff1a;Not Only SQL ,本质也是一种数据库的技术&#xff0c;相对于传统数据库技术&#xff0c;它不会遵循一些约束&#xff0c;比如&#xff1a;sql标准、ACID属性&#xff0c;表结构等。 Nosql优点 l 满足对数据库的高并发读写…

创建查询系统,提升工作效率

今天我要和大家分享一个非常实用的小技巧&#xff0c;能够让老师们在短短三分钟内创建一个非常方便的查询系统&#xff01;是的&#xff0c;通过使用易查分这个神奇的工具&#xff0c;你可以轻松满足各种查询需求&#xff01; 首先&#xff0c;老师们只需要注册一个易查分账号。…

使用两个队列模拟栈

整体思路如下图&#xff1a; 代码实现 import java.util.LinkedList; import java.util.Queue; import java.util.Scanner;/*** author: Arbicoral* Description: 使用2个队列模拟栈的 push() pop() top(), 自己实现打印 print()*/ public class QueueMoniStack2 {public stati…

uniapp 模糊搜索(小白必看)

实现模糊搜索很简单,按照下面的步骤: 1. 搜索栏 <view class"search-box"><uni-search-bar class"uni-mt-10" radius"100" placeholder"请输入移交信息" clearButton"auto" bgColor"#F8F8F8"cancelBut…

SpringMvc决战-【SpringMVC之自定义注解】

目录 一、前言 1.1.什么是注解 1.2.注解的用处 1.3.注解的原理 二.注解父类 1.注解包括那些 2.JDK基本注解 3. JDK元注解 4.自定义注解 5.如何使用自定义注解&#xff08;包括&#xff1a;注解标记【没有任何东西】&#xff0c;元数据注解&#xff09;&#xff1f; 三…

Linux下使用lookbusy加载cpu负载

Lookbusy 是一个用于在 Linux 系统上生成合成负载的简单应用程序。它可以在 CPU 上生成固定的、可预测的负载&#xff0c;保持选定数量的内存处于活动状态&#xff0c;并生成您需要的任意数量的磁盘流量。 官方地址&#xff1a;lookbusy -- a synthetic load generator 编译 …

Article Forge:AI写作文章内容生成器

【产品介绍】 名称 Article Forge 成立/上线时间 2022年 具体描述 Article Forge是一款基于人工智能和深度学习的AI写作文章内容生成器&#xff0c;可以自动写出1500字的文章无论是产品描述&#xff0c;还是整篇博客文章&#xff0c;Article Forge都能在一…

堆与栈的区别

OVERVIEW 栈与堆的区别一、程序内存分区中的堆与栈1.栈2.堆3.堆&栈 二、数据结构中的堆与栈1.栈2.堆 三、堆的深入1.堆插入2.堆删除&#xff1a;3.堆建立&#xff1a;4.堆排序&#xff1a;5.堆实现优先队列&#xff1a;6.堆与栈的相关练习 栈与堆的区别 自整理&#xff0c;…

竞赛 基于机器视觉的车道线检测

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…

video 视频编解码一些debug方法

文章目录 一、通过命令去获取一些数据1.2 确定我们xml配置文件: 二、查看我们芯片支持的编码能力三、通过log去获取信息 这个文章的主要内容是为了后期性能方面的debug, 设计到前期的bringup则没有 一、通过命令去获取一些数据 获取媒体相关的参数&#xff1a; # getprop |…

Thinkphp6 配置并使用redis图文详解 小皮面板

这篇文章主要介绍了Thinkphp6 配置并使用redis的方法,结合实例形式详细分析了Redis的安装、配置以及thinkphp6操作Redis的基本技巧,需要的朋友可以参考下 一、安装redis ThinkPHP内置支持的缓存类型包括file、memcache、wincache、sqlite。ThinkPHP默认使用自带的采用think\Ca…

SpringMVC之自定义注解

目录 一.什么是Java注解 1.简介 2.注解的分类 3.JDK元注解 二.自定义注解 1.自定义注解的分类 1.1.标记Annotation: 1.2.元数据Annotation: 2.如何使用自定义注解 3.案例演示 3.1 获取类、方法及属性上的注解值 3.2Inherited 的使用 3.3获取类属性上的注解属性值 3.…

springboot整合mybatis

一、项目结构展示 二、开始整合 1、引入pom依赖 进入Maven中央仓库选择自己所需要的依赖&#xff0c;maven仓库地址&#xff1a;Maven Central 完整Maven依赖如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"h…

markdown工具Atom预览与插件安装

​atom是以命令行作为插件选项的入口 打开命令输入框 Windows: ctrl shift p Mac: command shift p 输入命令安装 输入 markdown preview toggle &#xff0c;可以偷懒只输入mdpt(模糊匹配) 按enter键即可看到预览&#xff0c;如图&#xff0c;左边编辑&#xff0c;右…

Vue中的过滤器 Filters

过滤器 Filters 过滤器一般用于格式化文本内容&#xff0c;通常可以在两个地方使用&#xff0c;主要是模板语法、以及 v-bind 表达式中。例如我想对展示的文本进行一些特殊处理&#xff0c;将金额进行四舍五入后再展示。选项 filters 内可以编写多个自定义过滤器。 用法&…