vue3类型uniapp调用signalr

目录

背景

安装

renderjs

1选择一个tab页面承载renderjs代码

2编写业务逻辑代码

3编写renderjs代码


背景

后端使用.net6开发,长链接选择了微软的signalr而非原生的websocket

前端uniapp下vue3类型开发的app,需要通过长链接获取后端推送的消息

安装

npm install @microsoft/signalr

虽然安装和前端一样,但是无法像前端一样使用

renderjs

uniapp提供renderjs来帮助完成操作DOM、运行web端js库等功能

https://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjsuni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/tutorial/renderjs.html#renderjs这里signalr作为web端的js库 就必须使用这种方法

官方使用的示例是以echarts库作为示例的,可以下载示例项目参考代码

1 选择一个tab页面承载renderjs代码

这里我们选择[我的]'mine'页面

注意选择的tab页面需要是登录后首先进入的页面!因为需要用onMounted来启动signalr!

并在页面上添加元素

<view id='token' v-show='false'>{{token}}</view>

因为renderjs代码是无法调用uniapp的api的,所以只能通过这种方式获取缓存中的token

2 编写业务逻辑代码

注意:不支持<script setup>

vue3的话 必须使用setup函数,并且将renderjs调用的函数return出去

<script>
export default {
    setup() {
        //提供给renderjs调用的函数
        const test = param => {
            //用来处理业务逻辑
            console.log('test',param}
        }

        return{
            test
        }
    }
}
</script>

3 编写renderjs代码

renderjs里面封装signalr相关的代码

这里需要新建一个<script>标签,即同一个页面有两个script标签!

<script lang="renderjs" module="signalr">
    const signalR = require("@microsoft/signalr");
    export default {
		data() {
			return {
				connection: null,
				connected: false,//当前signalr是否连接上
				token: ''//连接signalr 后台需要token身份验证
			}
		},
		mounted() {
			setInterval(() => {
				this.start()
			}, 10 * 1000)
		},
        methods: {
            start() {
				let token = document.getElementById('token').innerHTML
				if (!token) {
					this.clear()
					return
				} else {
					if (token === this.token) {
						//token没变
						if (this.connection) {
							if (!this.connected) {
								// 还没连上 重新连
								this.connect()
							}
						} else {
							this.init(token)
							this.connect()
						}
					} else {
						//token变了 重新建立连接!
						this.token = token
						this.clear()
						this.init(token)
						this.connect()
					}
				}
			},
			clear() {
                //清空signalr
				this.disconnect()
				this.connection = null
			},
			async connect() {
                //连接signalr
				try {
					await this.connection.start()
					this.connected = true
				} catch (err) {
					this.connected = false
				}
			},
            async disconnect() {
				if (this.connection) {
					await this.connection.stop()
					this.connected = false
				} else {
					this.connected = false
				}
			},
            init(token) {
                this.connection = new signalR.HubConnectionBuilder()
					.withUrl(你的服务器signalrUrl, {
						accessTokenFactory: () => token
					})
					.configureLogging(signalR.LogLevel.Information)
					.build();
				this.connection.onclose(async error => {
					this.connected = false
				})
                this.connection.on(你的signalr方法名称, res => {
                    //!!重要!! 调用实际业务逻辑方法(之前定义的test方法)
					this.$ownerInstance.callMethod('test', res)
				})
            }
        }
    }



</script>

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值