微信小程序使用websocket通讯的demo，含前后端代码，亲测可用

下面是关于微信小程序如何使用websocket通讯的完整攻略。

1. 前言

微信小程序是一种应用程序平台，使用websocket通讯是一种前后端进行实时通讯的方式，能够实现消息快速传输，适用于实时聊天、游戏等场景。下面我将介绍如何使用websocket通讯进行实时聊天，包括前后端代码示例和亲测可用的demo。

2. 实现步骤

2.1 编写后端代码

我们首先需要编写后端代码，使用Node.js的ws库来实现websocket通讯。以下是一个示例代码，可以实现基于WebSocket的“Hello World”程序：

const WebSocket = require('ws');

const server = new WebSocket.Server({ port: 8080 });

server.on('connection', (socket) => {
  socket.send('Hello, client!');
  socket.on('message', (msg) => {
    console.log(`From client: ${msg}`);
    socket.send(`From server: ${msg}`);
  });
});

其中，创建了一个WebSocket的服务，等待客户端连接，当客户端连接后，会发送一条信息给客户端，客户端收到信息后会回复一条信息给服务端。服务端接收到客户端的信息后，会输出并将该信息发送给客户端。

2.2 编写前端代码

接下来，我们需要编写前端代码，在小程序中使用WebSocket对象。以下是一个示例代码：

let socketOpen = false // 判断连接是否打开
let socketMsgQueue = [] //要发送的信息队列
const socketMsgHandler = (msg) => { // 处理服务端返回的消息
  console.log(msg)
}

wx.connectSocket({ //连接websocket
  url: 'ws://localhost:8080'
})

wx.onSocketOpen(() => { // websocket打开
  socketOpen = true
  socketMsgQueue.forEach(msg => {
    sendSocketMessage(msg)
  })
  socketMsgQueue = []
})

wx.onSocketMessage((res) => { // 收到了服务端的信息
  socketMsgHandler(res.data)
})

function sendSocketMessage(msg) { // 发送数据
  if (socketOpen) {
    wx.sendSocketMessage({
      data: msg
    })
  } else {
    socketMsgQueue.push(msg)
  }
}

该代码中，我们使用小程序提供的连接WebSocket API进行连接，并在websocket打开时发送消息，记录是否打开，如果未打开则先将要发送的消息存储到发送队列中。如果有收到消息，则会执行回调函数socketMsgHandler进行处理。

2.3 测试

运行以上代码后，可以测试websocket通讯是否成功。在小程序中打开调试工具，在控制台可以看到以下信息：

Hello, client! // 来自服务端的第一条信息
From server: Hello // 来自服务端的回复信息

客户端收到了第一条来自服务端的信息，收到该条信息后，客户端也向服务端发送一条信息“Hello”，服务端收到后进行回复，并在控制台中输出。

3. 总结

本文介绍了如何使用websocket通讯进行实时聊天，包括前后端代码示例和亲测可用的demo。需要注意的是，websocket通讯是一种实时的通讯方式，在实际应用中需要注意兼容性、稳定性及安全性。