微信小程序-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 = ""
}
相关推荐
蝶开三月1 小时前
php:使用socket函数创建WebSocket服务
网络·websocket·网络协议·php·socket
耶啵奶膘4 小时前
uniapp+vue2全局监听退出小程序清除缓存
小程序·uni-app
刽子手发艺4 小时前
WebSocket详解、WebSocket入门案例
网络·websocket·网络协议
中云DDoS CC防护蔡蔡6 小时前
微信小程序被攻击怎么选择高防产品
服务器·网络安全·微信小程序·小程序·ddos
井眼10 小时前
微信小程序-prettier 格式化
微信小程序·小程序
qq_174482857512 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_99225027712 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__18 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
vener_21 小时前
LuckySheet协同编辑后端示例(Django+Channel,Websocket通信)
javascript·后端·python·websocket·django·luckysheet
老码沉思录1 天前
Android开发实战班 - 网络编程 - WebSocket 实时通信
android·网络·websocket