微信小程序-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 = ""
}
相关推荐
Emma歌小白5 小时前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子6 小时前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
2501_915918417 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张8 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
破无差17 小时前
《赛事报名系统小程序》
小程序·html·uniapp
00后程序员张19 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
AD钙奶-lalala20 小时前
SpringBoot实现WebSocket服务端
spring boot·后端·websocket
海绵宝宝不喜欢侬20 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063220 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
亮子AI21 小时前
【小程序】微信小程序隐私协议
微信小程序·小程序