- 小程序
创建 WebSocket 混入模块
在项目的mixins目录下创建一个名为socket.js的文件，内容如下：
export const socket = {
data() { return { // socket是否开启
socketOpen: false, // 定时器
timer: null, // 链接
surl: `ws://120.55.76.143:48080/infra/ws?token=66971089117e4372847ff4f31bc538df`, // 请替换为实际的WebSocket服务器URL // 底部id用于定位到底部
scrollIntoView: "", // 键盘高度
keyboardHeight: 0, // 监听键盘高度的方法
listener: null
}
},
onLoad(option) { // 开启键盘高度监听
this.listenerKeyboardHeight() // socket初始化
this.init() // 定时器，定时判断socket有没有掉线
this.timer = setInterval(() => {
this.isSocketConnct()
}, 2000)
},
beforeDestroy() { // 关闭定时器
clearInterval(this.timer) // 关闭键盘高度监听
uni.offKeyboardHeightChange(this.listener) // 关闭Socket
this.closeSocket()
},
methods: { // 发送消息
sendSocketMessage(msg) {
console.log("发送消息", msg);
let data = { content: { "fromUserId": uni.getStorageSync("userId"), "text": msg, "single": false,
}, type: "member-message"
} data = JSON.stringify(data)
let that = this if (this.socketOpen) {
uni.sendSocketMessage({ data,
success: (res) => {
setTimeout(() => { // json转对象
let param = JSON.parse(data)
that.sendMessageHandle(param)
}, 300)
},
fail(err) { // 发送失败处理
}
});
} else { // Socket没有开启，重新连接并重新发送消息
this.init()
setTimeout(() => {
this.sendSocketMessage(msg)
}, 300)
}
}, // 判断是否连接
isSocketConnct() { if (!this.socketOpen) {
console.log("WebSocket 再次连接！");
this.init()
}
}, // 初始化
init() {
this.connect()
this.openSocket()
this.onclose()
this.onSocketMessage()
}, // 建立连接
connect() {
console.log(this.surl);
uni.connectSocket({
url: this.surl, method: 'GET'
});
}, // 打开Soceket
openSocket() {
let that = this
uni.onSocketOpen((res) => {
that.socketOpen = true
console.log('WebSocket连接已打开！');
});
}, // 监听关闭
onclose() {
let that = this
uni.onSocketClose((res) => {
that.socketOpen = false
console.log('WebSocket 已关闭！');
});
}, // 关闭
closeSocket() {
uni.closeSocket();
}, // 接收事件
onSocketMessage() {
let that = this
uni.onSocketMessage((res) => {
let obj = JSON.parse(res.data)
console.log("接收事件", obj);
this.onMessageHandle(obj)
});
}, // 接收---到事件后处理的方法
onMessageHandle(obj) {
var data = JSON.parse(obj.content)
this.list.push({
userType: 'friend',
avatar: this._friendAvatar, content: data.text
}) // 滚动到底部
this.scrollToBottom()
}, // 发送---消息后处理的方法
sendMessageHandle(obj) {
var data = obj.content
this.list.push({
userType: 'self',
avatar: this._selfAvatar, content: data.text
}) // 滚动到底部
this.scrollToBottom()
}, // 定位到底部
scrollToBottom() {
this.$nextTick(() => {
this.scrollIntoView = "last-msg-item"
this.$nextTick(() => {
this.scrollIntoView = ""
})
})
}, // 开启键盘高度的监听
listenerKeyboardHeight() {
this.listener = (res) => {
console.log("键盘高度", res.height)
this.keyboardHeight = res.height
this.$nextTick(() => {
this.scrollToBottom()
})
}
uni.onKeyboardHeightChange(this.listener)
}
}
}聊天界面组件
接下来，在聊天界面中引入上面创建的混入模块，并实现聊天功能。
