vue3类型uniapp调用signalr_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>