uniapp vue3 微信小程序 项目中使用 websocet

const websocketParams = ref({
  accessToken: 'token'
})

const websoketFn = () => {
  uni.connectSocket({
    url: `wss://www.xxx.com:1688/coord/messenger/websocket/site`, //演示接口
    success: (res) => {
      console.log("正准备建立websocket中...", res)
    },
  })
  uni.onSocketOpen(function (res) {

    socketOpen.value = true
    sendSocketMessage()
    console.log('WebSocket连接已打开!', res)
  })
  uni.onSocketError(function (res) {
    console.log('WebSocket连接打开失败,请检查!', res)
  })

  // 建立连接后发送数据
  function sendSocketMessage() {
  //需要在确定建立连接后才能发送数据
    if (socketOpen.value)
      uni.sendSocketMessage({
        data: JSON.stringify(websocketParams.value)
      })
  }

  uni.onSocketMessage(function (res) {
    console.log('收到服务器内容:', res)
    getMessageNumber()
  })
}

微信小程序真机调试 websocket 报错 errMsg: “Invalid HTTP status.”

  • 这个错误通常是因为小程序 WebSocket 请求的地址没有配置为 HTTPS,而是使用了 HTTP,因此需要注意以下几点:
    • 小程序开发者工具可以支持使用 ws:// 前缀的 WebSocket 地址,但在真机上会因为不安全的原因而无法使用。因此,需要使用 wss:// 前缀的 WebSocket 地址来进行真机调试。
    • 在真机调试时,需要将服务器地址配置为 HTTPS 地址,否则会出现连接失败并报错 Invalid HTTP status.。需要注意的是,如果服务器本身不支持 HTTPS,则需要使用自己搭建的反向代理服务器来进行请求转发。
    • 另外,需要在小程序的开发设置里勾选“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书”这个选项。这个选项只在开发和测试阶段使用,正式发布时需要将其取消勾选。
    • 综上所述,要在微信小程序真机调试中使用 WebSocket,需要将地址配置为 wss:// 前缀的 HTTPS WebSocket 地址,并且需要选择“不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证”选项进行发和测试。
    • wss://www.xxx.com:1688/coord/messenger/websocket/site 使用前缀 wss

bye)🤡

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐