微信小程序WebSocket实现stream流式聊天对话功能

这篇具有很好参考价值的文章主要介绍了微信小程序WebSocket实现stream流式聊天对话功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要在微信小程序实现聊天对话功能,回话是流式应答,这里使用了WebSocket技术。WebSocket大家应该都很熟悉,使用wx.connectSocket就可以了。这里可能需要注意下的是流式应答,后端如何发送,前端如何接收。直接上代码:

可以扫码体验:

微信小程序websocket 实现聊天功能,微信小程序,websocket,小程序,流式对话

后端关键代码:

// 定义正则表达式
                    String regex = "data:\\s*(\\{.*\\})";
                    // 创建Pattern对象
                    Pattern pattern = Pattern.compile(regex);

                    String line;
                    while ((line = reader.readLine()) != null) {
                        // 处理每条数据
                        // System.out.println(line);
                        // 创建Matcher对象
                        Matcher matcher = pattern.matcher(line);
                        // 查找匹配项
                        if (matcher.find()) {
                            String dataValue = matcher.group(1);
                            JSONObject jsonObject = JSON.parseObject(dataValue);

                            String content = jsonObject.getString("result");
                            Boolean end = jsonObject.getBoolean("is_end");

                            JSONObject data = new JSONObject();
                            data.put("content", content);
                            data.put("end", end);
                            data.put("type", "message");
                            webSocketServer.sendInfo(uid.toString(), data.toJSONString());
                        }
                    }

小程序ts代码:

data: {
    messages: [],    // 聊天消息列表
    inputValue: '',  // 输入框的值
    ask: '',  // 输入框的值
    socketOpen: false,  // WebSocket 连接状态
    socketTask: null,  // WebSocket 实例
    answering: false, // 回答中。。。
    type: 2,
    credit: 0,
    scrollTop: 0,
  }
scrollToBottom() {
    // 在需要滚动到最底部的时机
    const query = wx.createSelectorQuery();
    query.select('.chat-container').boundingClientRect();
    query.select('.msgList').boundingClientRect();
    query.exec(res => {
      const scorllHeight = res[0].height;
      const listHeight = res[1].height;

      this.setData({
        scrollTop: listHeight - scorllHeight + 92
      });
    });
  },
async onLoad() {
    const chatList = 历史聊天记录;
    const chatListMessage: any = [];
    if (chatList && chatList.length > 0) {
      chatList.map((v: any) => {
        const ask = {
          sender: 'user',
          avatar: '',
          content: v.ask,
          createTime: v.createTime,
          id: v.id,
        };
        const answer = {
          sender: 'chat',
          avatar: 'xxx',
          content: v.answer,
          id: v.id,
        }
        chatListMessage.push(ask);
        chatListMessage.push(answer);
      })
    }
    // 初始化聊天消息列表,包含一条欢迎消息
    const messages: any = [
      {
        sender: 'chat',
        avatar: 'xxx',
        content: `欢迎`
      },
      ...this.data.messages,
      ...chatListMessage
    ]
    // @ts-ignore
    this.setData({ messages });
    this.scrollToBottom();
  },
  //滾動到底部
  bindscroll() {
    // console.log(1);
  },
  onUnload: function () {
    // 页面卸载时关闭 WebSocket 连接
    this.closeSocket();
  },

  inputChange: function (e: any) {
    // 监听输入框值的变化
    this.setData({
      inputValue: e.detail.value
    });
  },

  async sendMessage() {
    // 发送消息
    const message = this.data.inputValue;
    if (message.trim() === '') {
      showToast("请输入问题");
      return;
    }

    

    // 添加用户发送的消息到聊天消息列表
    const newMessage = {
      sender: 'user',
      avatar: '',
      content: message
    };
    //@ts-ignore
    this.data.messages.push(newMessage);

    // 清空输入框
    this.setData({
      messages: this.data.messages,
      inputValue: '',
    });

    this.data.ask = message;
    // 发送消息到 Chat
    this.sendToChat(message);
  },

  sendToChat: function (message: any) {
    if (!this.data.socketOpen) {
      // 如果 WebSocket 连接未打开,则创建连接
      this.createSocket();
    }
    this.setData({ answering: true });

    // 这里请求后台

    // 处理 Chat 的回答消息
    const newMessage: any = {
      sender: 'chat',
      avatar: '',
      content: ""
    };
    //@ts-ignore
    this.data.messages.push(newMessage);
    // 更新聊天消息列表并滚动到最新消息
    this.setData({ messages: this.data.messages });
    this.scrollToBottom();
  },

  createSocket: function () {
    // 创建 WebSocket 连接
    const socketTask = wx.connectSocket({
      url: ``,  // 替换为你的 WebSocket 服务器地址
      success: () => {
        console.log('WebSocket 连接成功');
      },
      fail: (error) => {
        console.error('WebSocket 连接失败', error);
      }
    });

    // 监听 WebSocket 连接打开事件
    socketTask.onOpen(() => {
      console.log('WebSocket 连接已打开');
      this.setData({
        socketOpen: true,
        socketTask: socketTask
      });
    });

    // 监听 WebSocket 接收到服务器的消息事件
    socketTask.onMessage((res: any) => {
      const data = JSON.parse(res.data);
      // console.log(data);
      if (data.type === 'message') {
        // 收到 Chat 的回答消息
        this.handleChatResponse(data);
      }
    });

    // 监听 WebSocket 连接关闭事件
    socketTask.onClose(() => {
      console.log('WebSocket 连接已关闭');
      this.setData({
        socketOpen: false,
        socketTask: null
      });
    });

    // 监听 WebSocket 错误事件
    socketTask.onError((error) => {
      console.error('WebSocket 错误', error);
    });
  },

  closeSocket: function () {
    if (this.data.socketOpen) {
      // 关闭 WebSocket 连接
      this.data.socketTask.close();
    }
  },

  handleChatResponse: async function (data: any) {

    // 处理 Chat 的回答消息
    const index = this.data.messages.length - 1;
    this.data.messages[index].content += data.content;
    // 更新聊天消息列表并滚动到最新消息
    this.setData({ messages: this.data.messages });

    if (data.end) {
      this.setData({ answering: false, messages: this.data.messages });
      this.data.ask = "";
    };

    this.scrollToBottom();
  },

可以扫码体验:

微信小程序websocket 实现聊天功能,微信小程序,websocket,小程序,流式对话 文章来源地址https://www.toymoban.com/news/detail-846170.html

到了这里,关于微信小程序WebSocket实现stream流式聊天对话功能的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • ChatGPT-MP:基于ChatGPT实现的微信小程序,适配H5和WEB端,包含前后台,支持打字效果输出流式输出,支持AI聊天次数限制,支持分享增加次数等功能

    包含前后台,支持打字效果输出流式输出,支持AI聊天次数限制,支持分享增加次数等功能。 开源版禁止商用,仅供学习交流,禁止倒卖。 感谢Star! 技术栈:JDK8 + SpringBoot + Vue2 + Uniapp + Mysql Github地址:https://github.com/oldinaction/ChatGPT-MP Gitee地址(国内访问更快):https://gitee.com

    2024年02月09日
    浏览(52)
  • ai聊天问答知识库机器人源码,基于gpt实现的本地知识库问答实现,聊天对话效果,发送回复以及流式输出...

    现在基于gpt做自己项目的问答机器人,效果非常的好。可以把自己的文档上传上去,让机器人根据文档来进行回答。 想要实现智能AI问答功能,现在大部分都是基于向量数据库的形式。 整体的流程就是:上传文档===openai向量接口 ==== 存入向量数据库 访客咨询:  咨询问题

    2024年02月10日
    浏览(46)
  • 【微信开发】微信小程序实现实时聊天功能

    最近在做一个项目,需要运用到实时聊天功能,分享一下。      分为: 1.界面如何布局以及细节; 2.如何实现实时更新; 3.全部代码展示;         一、界面如何布局以及细节:         1.说到底,聊天界面就是循环一个数组,每一行为一个单位(item),循环(wx.for)我

    2024年02月04日
    浏览(54)
  • 微信小程序——实现对话模式(调用大模型图片生成)

    大家好,我是yma16,本文分享微信小程序——实现对话模式(调用大模型图片生成)。 aigc图片生成 AIGC (Artificial Intelligence Generated Content) 可以生成各种类型的图片,包括风景、动物、人物、抽象等等。生成图片的过程通常是使用预训练的神经网络模型,该模型可以根据输入的

    2024年04月09日
    浏览(57)
  • springboot+websocket+微信小程序实现评论区功能

    1. 什么是WebSocket? WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器 全双工通信 ,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是: WebSocket 是一种 双向通信协议 ,在建立连接后,WebSo

    2024年04月16日
    浏览(58)
  • 微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:uniapp开发的小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 在static/js中新建stomp.js和websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代码如下: 位置:项目/pages/static/

    2024年02月11日
    浏览(60)
  • 微信小程序ChatGpt流式响应

    最近用微信小程序做chatGpt的Ai对话,其中重要的一点就是流式响应,现在分享处理逻辑,先给演示图。  下面是关键代码实现逻辑 其中有两个关键点需要注意 1.enableChunked: true流式响应开关,会自动在header中加入transfer-encoding chunked 2.arraybuffer转字符串问题,有TextDecoder就很好处

    2024年02月12日
    浏览(50)
  • uniapp微信小程序使用stomp.js实现STOMP传输协议的实时聊天

    简介: stomp.js:原生微信小程序中使用 stomp.js:官网 stomp.js:GitHub 本来使用websocket,后端同事使用了stomp协议,导致前端也需要对应修改。 如何使用 1.yarn add stompjs 2.版本 “stompjs”: “^2.3.3” 3.在static/js中新建websocket.js,然后在需要使用的页面引入监听代码+发送代码即可 代

    2024年02月11日
    浏览(44)
  • 09-微信小程序 网络请求API(实现轮播广告和简易的聊天窗口)

    09-微信小程序API网络请求(实现轮播广告和简易的聊天窗口) 做项目的开发,一定离不开网络相关的操作,小程序做的都是客户端,客户端请求服务端做一些交互。 微信小程序提供的API的方式,通过API的方式可以调用微信提供的强大的功能,以增强小程序的功能,如:网络请

    2024年02月11日
    浏览(41)
  • 微信小程序之流式(chunked)响应

    使用场景 实时输出场景(GPT) 数据实时要求比较高(商场首页) 微信小程序用法 1、启动块接收(只是适合使用在wx.request接口中) 2、重写块接收函数onChunkReceived 特别注意 接收的Arraybuffer需要转换为字符串进行处理,需要注意中文,详细请查考 往期博文 启动enableChunked之后

    2024年02月10日
    浏览(54)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包