微信小程序实现聊天室

完整攻略：微信小程序实现聊天室

作为一种基于微信生态的应用开发方式，微信小程序已经被越来越多的开发者所使用。而其中，实现聊天室类型的应用更是相对热门的开发需求。本文基于微信开发者工具的环境，讲解如何使用小程序实现聊天室应用。

1. 前置条件

在开始实现聊天室前，我们需要创建一个小程序项目并在微信开发者工具中打开。具体对应流程如下：

• 打开微信开发者工具，选择创建项目；
• 选择小程序类型，并填写相应的项目名称、AppID、项目路径；
• 选取一个合适的项目模板，例如“空白模板”；

• 创建完成后，进入项目编辑界面。

• 实现聊天室

在实现聊天室的过程中，我们需要考虑以下两个主要功能点：

a. 连接微信 WebSocket

为了实现实时聊天的功能，我们需要在小程序中通过 WebSocket 连接到服务器。实现 WebSocket 连接的具体步骤如下：

• 在小程序中引入 wxsdk.js 文件，该文件用于提供 WebSocket 相关的 API 接口；
• 构造 WebSocket 连接对象，传入 WebSocket 连接地址，同时监听 WebSocket 的连接、关闭、错误、接收等事件；

示例代码：

var socketOpen = false;
var socketMsgQueue = [];

wx.connectSocket({
  url: 'wss://xxxx.com',
  header:{
    'content-type': 'application/json'
  },
  method:"GET"
})

wx.onSocketOpen(function (res) {
  socketOpen = true
  for (var i = 0; i < socketMsgQueue.length; i++) {
    sendSocketMessage(socketMsgQueue[i])
  }
  socketMsgQueue = []
})

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

wx.onSocketClose(function (res) {
  console.log('WebSocket 已关闭！')
})

wx.onSocketError(function (res) {
  console.log('WebSocket 连接打开失败，请检查！')
})

function sendSocketMessage(msg) {
  if (socketOpen) {
    wx.sendSocketMessage({
      data:msg
    })
  } else {
    socketMsgQueue.push(msg)
  }
}

1. 实现聊天室前端UI

在 WebSocket 连接完成后，我们还需要通过小程序预定义的组件，实现用户界面的展示。考虑到聊天室的实时性需求，建议只提供一个简单的界面，具体实现如下：

• 通过使用微信提供的模板语言 WXML，创建聊天室菜单栏和消息列表；
• 在模板中使用数据绑定来动态更新聊天室界面，例如：

<view>
  <scroll-view scroll-y="true" class="chat-content" scroll-into-view="{{toView}}" scroll-with-animation="false">
    <template wx:for="{{messageList}}" wx:key="*this">
      <view wx:for-item="item">
        <view class="{{item.from===userOpenId? 'user':'other'}}">{{item.content}}</view>
      </view>
    </template>
  </scroll-view>

  <view class="chat-send">
    <textarea maxlength="-1" bindinput="inputHandler" value="{{inputMessage}}" placeholder="请输入聊天内容"></textarea>
    <button class="send-message" disabled="{{!canSend}}" bindtap="sendMessage">{{canSend?"发送":"正在发送"}}</button>
  </view>
</view>

代码中，使用 messageList 数组来记录已经发送/接收到的消息内容，同时在 textarea 输入框内通过添加 input 事件，并读取最新输入内容，将其存入 inputMessage 变量中。

1. 实现聊天室后台服务

在微信小程序中实现聊天室服务，需要给所有连接到聊天服务的客户端提供一个唯一标识。我们可以通过一个可能存在安全隐患的方式，使用小程序的 openId 作为客户端的唯一标识。

后端代码如下：

//获取WebSocket请求连接后，服务器对象
wsmHandler.on('upgrade', function(request, socket, head) {
    let url=request.url
    let queryData = url.split('?')[1]
    let obj={}
    queryData.split('&').forEach((item)=>{
        obj[item.split('=')[0]]=item.split('=')[1]
    })
    let wxOpenid=obj.wxOpenid

    if (!clients[wxOpenid]) {
        //监听'ping'事件，如果客户端定时发送的ping消息，则原样返回pong
        clients[wxOpenid] = {
            openId:wxOpenid,
            socket:socket
        }
        console.log('WebSocket client [' + wxOpenid + '] connected.')
    }

    socket.on('close', function(code, reason) {
        console.log('WebSocket client [' + wxOpenid + '] disconnected: ' + code + ', ' + reason)
        delete clients[wxOpenid]
    })

    socket.on('error', function(error) {
        console.log('WebSocket client [' + wxOpenid + '] connection error:', error)
    })

    socket.on('message', function(msg) {
        console.log('Received message from client [' + wxOpenid + ']: ', msg)

        for (let peerOpenId in clients) {
            if (peerOpenId != wxOpenid) {
                clients[peerOpenId].socket.send(msg)
            }
        }
    })

    socket.send('Welcome to chat server.')
})

以上内容，主要介绍了如何使用微信小程序实现聊天室的完整攻略。其中，我们实现了通过 WebSocket 连接到服务器、从服务器接收及发送消息、使用模板语言 WXML 来动态更新聊天室界面、以及后端实现聊天室服务的相关功能点。在实战过程中，需要根据实际需求进行不断的调整和完善。