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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值