微信小程序 Utils丨基于Socket.io.js,实现聊天功能
需求是 client 与 server 以 socket 方式连接对话,场景为 client 发送一条消息后,server 会返回多条消息且非同时返回。
使用微信原生的 WebSocket 及其提供的 API 后多环境调试均为能连接成功,此时考虑在小程序中集成更加成熟且使用方便的 Socket.io.js ,过程简单使用方便,很赞!
配置服务器域名
引入资源文件
示例代码
代码部分包含四个主要方法,分别为:
启动连接:socketStart()
发送数据:socketSendMessage()
接收数据:socketReceiveMessage()
断开连接:socketStop()
- 使用时请将变量socketUrl修改为你的服务器地址
- 确保你的服务器地址已在微信公众平台配置
- 使用时请将变量sendMessage修改为与服务器约定的格式
// socket 连接插件
const io = require('../../utils/weapp.socket.io.js')
// socket 连接地址
var socketUrl = 'wss://www.贵司服务器地址.com'
// socket 状态更新
var socketMessage = ''
// 上下文对象
var that
Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
that = this
this.socketStart();
},
/**
* 启动socket
*/
socketStart: function () {
// 设置socket连接地址 socketUrl
const socket = (this.socket = io(
socketUrl,
))
socket.on('connect', () => {
this.setData({ socketMessage: socketMessage += 'SOCKET连接成功 → \n\n' })
// 此处修改为与server约定的数据、格式
var sendMessage = '{"token":"v3jsoc8476shNFhxgqPAkkjt678","client":"发送内容"}'
this.socketSendMessage(sendMessage);
})
socket.on('connect_error', d => {
this.setData({ socketMessage: socketMessage += 'SOCKET连接失败 → \n\n' })
})
socket.on('connect_timeout', d => {
this.setData({ socketMessage: socketMessage += 'SOCKET连接超时 → \n\n' })
})
socket.on('disconnect', reason => {
this.setData({ socketMessage: socketMessage += 'SOCKET连接断开 → \n\n' })
})
socket.on('reconnect', attemptNumber => {
this.setData({ socketMessage: socketMessage += 'SOCKET正在重连 → \n\n' })
})
socket.on('reconnect_failed', () => {
this.setData({ socketMessage: socketMessage += 'SOCKET重连失败 → \n\n' })
})
socket.on('reconnect_attempt', () => {
this.setData({ socketMessage: socketMessage += 'SOCKET正在重连 → \n\n' })
})
socket.on('error', err => {
this.setData({ socketMessage: socketMessage += 'SOCKET连接错误 → \n\n' })
})
socket.on('message', function (d) {
this.setData({ socketMessage: socketMessage += '服务器返回数据 → \n\n' })
that.socketReceiveMessage(d)
})
},
/**
* 断开socket
*/
socketStop: function () {
if (this.socket) {
this.socket.close()
this.socket = null
}
},
/**
* 发送消息
*/
socketSendMessage: function (sendStr) {
if (this.socket) {
this.setData({ socketMessage: socketMessage += '向服务器发送数据 → ' + sendStr + '\n\n'})
this.socket.emit('message', sendStr);
}
},
/**
* 接收消息
*/
socketReceiveMessage: function (receivedStr) {
this.setData({ socketMessage: socketMessage += '服务器返回数据 → ' + receivedStr + '\n\n'})
this.socketStop();
},
})