uni-app app端 nvue 页面无法接收eventStream吗 无法使用renderjs

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app app端 nvue 页面无法接收eventStream吗 无法使用renderjs

操作步骤

1、app端,nvue 页面无法接收eventStream 吗

预期结果

1、希望能同h5一样能够接收eventStream 消息

实际结果

1、app nvue页面,接收不了eventStream 消息

bug描述

1、app端,使用nvue页面是为了自定义视频全屏界面的一些功能
2、视频全屏状态下,发起eventStream请求,但是现在请求返回结果是所有流消息一起返回了
3、没办法使用fetch以及const reader = response.data?.getReader();获取

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 Apple M2;MacOS 14.5 (23F79)
HBuilderX类型 正式
HBuilderX版本号 4.36
手机系统 Android
手机系统版本号 Android 13
手机厂商 OPPO
手机机型 OnePlus 8/安卓平板
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

2 回复

前提条件:app,nvue页面请求eventstream无法实现,所以用了另一个页面请求,如下描述:
1、在A.vue 页面使用renderjs 发请求获得eventsteam返回的消息
2、在B.nvue 页面将请求内容通过uni.$emit 发送给 A.vue页面 2.1 A.vue 页面接收之后发起请求,并在获得eventsteam 消息之后,在通过uni.$emit 发回给B.nvue页面
3、然后页面入栈顺序是,A.vue 跳转 B.nvue ,请问这种方式有什么隐患吗?


在uni-app中,nvue页面和传统的vue页面在处理方式和功能上确实存在一些差异。nvue是基于Weex引擎的原生渲染页面,而传统的vue页面则是基于Webview的渲染方式。eventStreamrenderjs特性主要针对的是Webview渲染的页面,因此在nvue页面中确实存在一些兼容性问题。

关于eventStream

eventStream主要用于服务器推送事件(Server-Sent Events, SSE),这在传统的vue页面中是可以使用的,但在nvue页面中,由于渲染机制的不同,可能无法直接使用。如果需要在nvue中实现类似的功能,可以考虑使用WebSocket或者其他长连接技术来实现服务器到客户端的实时数据推送。

以下是一个使用WebSocket的简单示例,可以在nvue页面中使用:

<template>
  <div>
    <text>{{message}}</text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '等待服务器消息...'
    };
  },
  mounted() {
    this.ws = new WebSocket('wss://your-server-url');
    this.ws.onmessage = (event) => {
      this.message = event.data;
    };
    this.ws.onerror = (error) => {
      console.error('WebSocket Error: ', error);
    };
    this.ws.onclose = () => {
      console.log('WebSocket is closed now.');
    };
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>

关于renderjs

renderjs是uni-app提供的一种在vue页面中运行JavaScript代码的方式,主要用于提高页面性能,特别是在处理复杂计算或大量DOM操作时。由于nvue页面是基于原生渲染的,renderjs在nvue页面中并不适用。

在nvue页面中,如果需要提高性能,可以考虑使用C++或者Java(针对Android)编写原生模块,并通过JSBridge与nvue页面进行通信。

总结

虽然nvue页面在处理一些高级Web特性时存在一些限制,但可以通过其他方式实现类似的功能。例如,使用WebSocket替代eventStream进行实时数据通信,以及通过编写原生模块来提高性能。在开发过程中,根据项目的具体需求和目标平台选择合适的解决方案是关键。

回到顶部