分享一个让 uniapp 微信小程序支持 EventSource 的方法

这篇具有很好参考价值的文章主要介绍了分享一个让 uniapp 微信小程序支持 EventSource 的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序不支持

EventSource(SSE)是一种HTML5标准,旨在提供一种方式来在Web应用中实现异步通信和事件处理。

然而,根据现有的信息,uni-app并没有直接支持EventSource,这意味着开发者需要寻找其他技术或替代方案来实现类似的效果。

尽管有些主流浏览器支持SSE,但小程序目前还不能兼容这个API,这可能是由于微信平台对新技术的兼容性考虑或是开发生态的限制。文章来源地址https://www.toymoban.com/news/detail-853665.html

一个替代实现方式

class EventSource {
    constructor(url, retryTime = 0) {
        this.url = url;
        this.retryTime = retryTime;
        this.listeners = {};
        this.requestTask = null
        this.connect()
    }

    connect() {
        this.requestTask = wx.request({
            url: this.url,
            enableChunked: true,
            responseType: 'text',
            method: 'GET',
            timeout: 300e3,
            success: res => {
                this.emit('success', res)
                if (this.retryTime > 0) {
                    setTimeout(() => {
                        this.connect()
                    }, this.retryTime)
                }
            },
            fail: () => {
            }
        });
        this.requestTask.onHeadersReceived(res => {
            this.emit('open', res);
        })
        this.requestTask.onChunkReceived(res => this.handleChunk(res))
    }

    handleChunk(res) {
        const arrayBuffer = res.data;
        const uint8Array = new Uint8Array(arrayBuffer);
        let data = uni.arrayBufferToBase64(uint8Array)
        data = new Buffer(data, 'base64')
        data = data.toString('utf8')
        const lines = data.split("\n\n")
        // console.log('data', data, lines)
        lines.forEach(line => {
            if (!line.trim()) {
                return
            }
            const [key, value] = line.trim().split(':');
            if (key === 'data') {
                const data = line.substring(5).trim();
                try {
                    const json = JSON.parse(data);
                    this.emit('message', {
                        data: JSON.stringify(json)
                    })
                } catch (e) {
                    this.emit('error', 'Api.EventSource.ParseError:' + e)
                }
            } else {
                this.emit('error', 'Api.EventSource.ParseFail:' + line)
            }
        })
    }

    addEventListener(event, callback) {
        if (!this.listeners[event]) {
            this.listeners[event] = []
        }
        this.listeners[event].push(callback)
    }

    emit(event, data) {
        if (this.listeners[event]) {
            this.listeners[event].forEach(callback => {
                callback(data)
            });
        }
    }

    close() {
        if (this.requestTask) {
            this.requestTask.abort()
        }
    }
}

到了这里,关于分享一个让 uniapp 微信小程序支持 EventSource 的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包赞助服务器费用

相关文章

  • uniapp 微信小程序分享海报

    下面是一个Uniapp微信小程序分享海报的简单示例: 在Uniapp项目中创建一个新的页面,用于展示要分享的内容和生成海报。例如,我们可以在新页面中显示一张图片和一些文本。 在页面中引入以下两个Uniapp组件:canvas和image。canvas用于生成海报,image用于预览和下载海报。示例

    2024年02月11日
    浏览(65)
  • uniapp 微信小程序分享、分享朋友圈功能

    uniapp 微信小程序分享、分享朋友圈功能

    页内自定义分享按钮 当页面js上没有添加事件“onShareAppMessage”,右上角‘…’不会出现“转发”事件。 如果有事件,但是没有定义事件内容的话,转发的卡片则是当前页面的截屏信息。 官方文档:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 方式1:小程序右上角原生菜

    2024年02月16日
    浏览(42)
  • uniApp配置微信分享 uniApp跳转微信小程序

    uniApp配置微信分享 uniApp跳转微信小程序

    最近在做uniApp时需要跳转微信小程序进行支付,以为和跳转支付宝小程序支付一样简单结果让我发狂,跳转微信代码其实很简单就是下面这一段,但是要配置一大推东西 提示:plus为App端默认的系统参数,不用引入或者其他操作            ios跳转跳转微信小程序还需要配置

    2024年02月09日
    浏览(40)
  • UNIAPP 微信小程序实现分享功能

    UNIAPP 微信小程序实现分享功能

    默认情况下点击微信小程序调试器无法实现分享功能,如下图  此时需要设置如下操作,个人默认习惯是在 utils文件下 创建 share.js 文件 并写入代码 内容如下 然后打开main.js 修改如下 设置完成后再点击右上角的分享就打开了 回到组件内 如果需要通过按钮实现分享功能  参考

    2024年02月04日
    浏览(42)
  • uniapp微信小程序使用分享功能

    uniapp微信小程序使用分享功能

    实现效果为如下所示的小程序分享功能: 本项目是一个使用uniapp搭建的微信小程序,上线后点击右上角的…,发现其中的发送给朋友和分享到朋友圈是如下图所示的灰色不能点击: 那么,如何设置微信小程序的分享功能呢? 第一步:在onLoad方法中写wx.showShareMenu方法,设置

    2024年02月11日
    浏览(46)
  • uniapp 微信小程序实现小程序分享好友

    我们可以使用 onShareAppMessage 的方法对 button 按钮进行触发 HTML代码

    2024年02月02日
    浏览(36)
  • uniapp - [微信小程序] 详细动态设置分享转发时的参数,实现点击按钮元素后 “手动触发“ 动态设置参数并调起转发分享给好友(列表上每一个分享按钮,单独设置分享转发参数,每次都是不同的分享参数)

    uniapp - [微信小程序] 详细动态设置分享转发时的参数,实现点击按钮元素后 “手动触发“ 动态设置参数并调起转发分享给好友(列表上每一个分享按钮,单独设置分享转发参数,每次都是不同的分享参数)

    网上都是直接写死(默认不变)的分享参数,有时候需要动态赋值分享的标题、图片等,本文,这时候就不行了。 【如果需要原生微信小程序的教程,请访问:这篇文章】 本文 实现了在 uniapp 微信小程序端开发中,动态设置分享的参数(并与右上角胶囊点击的分享共存,互

    2024年02月14日
    浏览(97)
  • uniapp 微信小程序 动态分享 带参数

    uniapp 微信小程序 动态分享 带参数

    uniapp 微信小程序 有动态参数的那种 微信小程序分享有两种分享。 第一种:就是右上角自带的菜单分享 第二种: button按钮通过open-type=\\\"share\\\" 点击分享 通常我们分享默认都是分享本页面 然后带一些分享参数比如说id uid等 直接放在url地址后面就可以了, 那如果我们使用 按钮

    2024年02月11日
    浏览(67)
  • uniapp微信小程序全局分享和自定义页面分享

    uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。 1.在项目根目录创建mixins文件夹,然后创建全局分享的 js 文件。mixins/share.js  2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入: 3.自定义页

    2024年02月13日
    浏览(39)
  • 【uniapp】微信小程序分享到聊天,朋友圈

    【uniapp】微信小程序分享到聊天,朋友圈

    ​​​​​manifest.json的app模块配置开启Share微信分享,填入appId。  2.示例  3.界面分享按钮:button open-type=\\\"share\\\"分享/button

    2024年02月14日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包