微信小程序-WebSocket

文章目录

微信小程序-WebSocket

概述

微信小程序官方提供了 WebSocket API,允许服务器主动向微信小程序发送消息。

微信小程序中的 WebSocke 与HTML5中的 WebSocket 基本相同。WebSocket 是一种在单个TCP连接上进行全双工通信的协议,它会在客户端与服务器之间专门建立一条通道,使客户端与服务器之间的数据交换变得简单。客户端与服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。

WebSocket 协议是以 ws 或 wss 开头的(类似于 http 和 https 的关系),在微信小程序中,正式项目必须使用以 wss 开头协议,在开发模式下可以使用以 ws 开头协议。

WebSocket

通过调用 wx.connectSocket() 方法创建一个 WebSocket 连接。

wx.connectSocket()方法选项:

选项 类型 说明
url string wss 接口地址
header object 请求头,不能设置 Referer
timeout number 超时事件,单位为毫秒
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数

使用 wx.connectSocket() :

js 复制代码
wx.connectSocket({
    url: "ws://127.0.0.1:3000"
})

SocketTask

当项目中同时存在多个 WebSocket 的连接时,可以使用 SocketTask 管理 WebSocket 连接,使每一条链路的生命周期都更可控。

使用 wx.connectSocket() 方法的返回值就是一个 ScoketTask 实例。

js 复制代码
const task = wx.connectSocket({
    url: "ws://127.0.0.1:3000"
})

SocketTask实例方法:

方法
send() 通过 WebSocket 连接发送数据
close() 关闭 WebSocket 连接
onOpen() 监听 WebSocket 连接打开事件
onClose() 监听 WebSocket 连接关闭事件
onError() 监听 WebSocket 错误事件
onMessage() 监听 WebSocket 接收到服务器的消息事件

send()选项:

选项 类型 说明
data string/ArrayBuffer 需要发送的内容,必填项
success function 接口调用成功的回调方法
fail function 接口调用失败的回调方法
complete function 接口调用结束的回调方法

onClose()属性:

属性 类型 说明
code number 一个数字值表示关闭连接的状态号,表示连接被关闭的原因。
reason string 一个可读的字符串,表示连接被关闭的原因。

close()选项:

选项 类型 说明
code number 一个数字值表示关闭连接的状态号,表示连接被关闭的原因。默认值为 1000(表示正常关闭连接)
reason string 一个可读的字符串,表示连接被关闭的原因。这个字符串必须是不长于 123 字节的 UTF-8 文本(不是字符)。
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数

onOpen()属性:

属性 类型 说明
header object 连接成功的 HTTP 响应 Header
profile object 网络请求过程中一些调试信息

onMessage()属性:

属性 类型 说明
data string/ArrayBuffer 服务器返回的消息

onError()属性:

属性 类型 说明
errMsg string 错误信息

使用

创建和监听:

js 复制代码
Page({
  data: {
    content: "",
    list: [],
    lastId: ""
  },
  message: "",
  ws: null,
  onLoad: function () {
    const ws = wx.connectSocket({
      url: 'ws://127.0.0.1:3000',
      success: res => {
        console.log("连接成功:" + res);
      },
      fail: err => {
        console.log("连接失败:" + err);
      }
    })
    ws.onMessage(msg => {
      console.log("接收消息:" + msg.data);
      let data = JSON.parse(msg.data)
      let list = this.data.list
      let lastId = list.length
      list.push({
        id: lastId,
        content: data.content,
        role: "server"
      })
      this.setData({
        list,
        lastId
      })
    })
    ws.onClose(res => {
      console.log("close");
    })
    this.ws = ws
  },
  onUnload: function () {
    this.ws.close()
  },
  input: function (e) {
    this.message = e.detail.value
  }, 
})

发送数据:

js 复制代码
send: function (e) {
    if (!this.message) {
        wx.showToast({
            title: "消息不能为空",
            icon: "none",
            duration: 2000
        })
        return
    }
    this.ws.send({
        data: this.message
    })
    const list = this.data.list
    const lastId = list.length
    list.push({
        id: lastId,
        content: this.message,
        role: "me"
    })
    this.setData({
        list,
        lastId,
        content: ""
    })
    this.message = ""
}
相关推荐
海拥31 分钟前
《用Cursor和AI绘画24小时开发壁纸小程序》详细开发实录
微信小程序·cursor
m0_564264183 小时前
springboot项目之websocket的坑:spring整合websocket后进行单元测试后报错的解决方案
java·经验分享·spring boot·websocket·spring·单元测试·报错
10年前端老司机4 小时前
微信小程序behaviors
前端·javascript·微信小程序
山河故人1634 小时前
基于 SSE 和分块传输的 Uniapp 微信小程序 实现 流式传输 对话
微信小程序·小程序·uni-app
10年前端老司机4 小时前
微信小程序自定义组件
前端·javascript·微信小程序
Maitians5 小时前
微信小程序 template 模版详解
微信小程序
说私域8 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序源码赋能下的社交电商创业者技能跃迁与价值重构
人工智能·小程序·重构·开源·零售
中小企业实战军师刘孙亮18 小时前
实体店的小程序转型之路:拥抱新零售的密码-中小企实战运营和营销工作室博客
职场和发展·小程序·创业创新·学习方法·业界资讯·零售·内容运营
说私域19 小时前
基于开源技术体系的品牌赛道力重构:AI智能名片与S2B2C商城小程序源码驱动的品类创新机制研究
人工智能·小程序·重构·开源·零售
王哈哈的学习笔记21 小时前
uniapp小程序使用echarts
前端·小程序·uni-app