微信小程序webSocket的使用方法

接下来我将详细讲解微信小程序中使用WebSocket的方法。主要分为以下几个步骤：

1. 引入WebSocket API

在小程序页面js文件里，需要引入WebSocket API，代码如下：

// 引入WebSocket API
const socket = require('../../utils/websocket.js')

其中websocket.js文件需要自行创建，代码如下：

function connect() {
  wx.connectSocket({
    url: 'ws://localhost:8080', // WebSocket服务器地址，自行修改
    success: function () {
      console.log('WebSocket连接成功');
    }
  })
}

function send(msg) {
  wx.sendSocketMessage({
    data: msg,
    success: function () {
      console.log('消息发送成功');
    }
  })
}

module.exports = {
  connect: connect,
  send: send
}

2. 连接WebSocket服务器

在需要使用WebSocket的页面中调用connect()函数连接WebSocket服务器，代码如下：

socket.connect()

当连接成功后，会在控制台打印“WebSocket连接成功”消息。

3. 监听WebSocket连接状态

可以通过微信提供的API监听WebSocket状态的变化，代码如下：

wx.onSocketOpen(() => {
  console.log('WebSocket连接已打开！')
})

wx.onSocketClose(() => {
  console.log('WebSocket连接已关闭！')
})

4. 发送和接收WebSocket消息

在需要发送和接收WebSocket消息的页面中，调用send()函数发送消息，代码如下：

socket.send('{ "name": "Tom", "age": 20 }')

在监听WebSocket消息时，需要通过wx.onSocketMessage()函数来监听消息，代码如下：

wx.onSocketMessage((res) => {
  console.log('收到服务器消息：', res.data)
})

至此，以上就是微信小程序中使用WebSocket的基本步骤，下面提供两个示例说明：

示例一：WebSocket服务器端向小程序发送消息

WebSocket服务器端代码中使用Java编写，代码如下：

@ServerEndpoint("/ws")
public class WebSocketServer {
    @OnOpen
    public void onOpen(Session session) {
        System.out.println(session.getId() + "连接成功！");
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("收到客户端消息：" + message);
        session.getBasicRemote().sendText("Hello! " + message);
    }

    @OnClose
    public void onClose(Session session) {
        System.out.println(session.getId() + "已断开连接！");
    }
}

其中@ServerEndpoint注解表示创建一个WebSocket服务器端的Endpoint，可以接收客户端的连接，@OnOpen、@OnMessage、@OnClose分别表示连接成功、收到消息、连接关闭时执行的方法。

在小程序客户端的.js文件中，连接WebSocket服务器后，可以向服务器发送一条消息，代码如下：

socket.connect()

wx.onSocketOpen(() => {
  console.log('WebSocket连接已打开！')
  socket.send('Hello, WebSocket!')
})

wx.onSocketClose(() => {
  console.log('WebSocket连接已关闭！')
})

wx.onSocketMessage((res) => {
  console.log('收到服务器消息：', res.data)
})

当WebSocket服务器端收到消息后，会回复一条消息给小程序客户端。

示例二：使用WebSocket实现在线聊天

在小程序中可以使用WebSocket实现在线聊天的功能。在小程序中开发具体的聊天页面时，可以借鉴以下代码：

<!-- chat.wxml -->
<view class="chat-container">
  <scroll-view class="message-board">
    <view wx:for="{{messages}}" wx:key="{{index}}">{{item}}</view>
  </scroll-view>
  <input class="message-input" placeholder="请输入消息" bindinput="onInput"></input>
  <button class="send-btn" type="primary" size="mini" disabled="{{disabled}}" bindtap="sendMsg">发送</button>
</view>

// chat.js
const socket = require('../../utils/websocket.js')

Page({
  data: {
    messages: [],
    disabled: true,
    message: ''
  },

  onLoad() {
    socket.connect()
    this.onSocketMessage()
  },

  onSocketMessage() {
    wx.onSocketMessage((res) => {
      this.data.messages.push(res.data)
      this.setData({ messages: this.data.messages })
    })
  },

  onInput(e) {
    if (e.detail.value) {
      this.setData({
        message: e.detail.value,
        disabled: false
      })
    } else {
      this.setData({ disabled: true })
    }
  },

  sendMsg() {
    socket.send(this.data.message)
    this.setData({ message: '', disabled: true })
  }
})

在以上代码中，我们获取到输入框的内容message，通过WebSocket发送到后端服务器，后端服务器再将消息发送给其他在线用户。

以上就是两个示例，演示如何在微信小程序中使用WebSocket实现消息的收发。需要注意，WebSocket需要在小程序开发者工具或线上环境下测试，不能在真机调试时使用。