<template>
<view>
<input type="text" v-model="mes" placeholder="消息" />
<button @click="sendSocketMessageStr_2">发送</button>
<button @click="CloseSokt">关闭</button>
<button @click="InitApi">重新连接</button>
<button @click="openchooseImage">打开相机</button>
</view>
</template>
<script>
export default {
data() {
return {
mes: "",
heartbeatTimer: null,
socketTask: {},
kf: 'xxx',
UserHubId: '', //
isshow:false,//判断是否连接成功
access_token: 'xxx',
}
},
mounted() {
this.InitApi()
},
onUnload() {
},
methods: {
InitApi() {
this.socketTask = uni.connectSocket({
url: 'wss://xxx/xxx?kf=' + this.kf + '&access_token=' + this
.access_token,
success: () => {
console.log("正准备建立websocket中...");
// 返回实例
return this.socketTask
},
faile(err) {
console.log("执行了")
}
});
this.setupSocketListeners()
},
setupSocketListeners() {
//监听链接事件
this.socketTask.onOpen((res) => {
this.sendSocketMessageStr_1(`{"protocol":"json", "version":1}${String.fromCharCode(0x1e)}`)
console.log("WebSocket连接正常!");
})
//监听连接关闭事件
this.socketTask.onClose((res) => {
console.log("WebSocket连接关闭!", res);
})
//监听错误事件
this.socketTask.onError((res) => {
console.log("WebSocket错误!", res);
// console.log("WebSocket错误!", JSON.parse(res)); //报错
// console.log("WebSocket错误!",JSON.stringify(res)); //返回{}
// console.log("WebSocket错误!",res[0]); //返回undefined
})
//监听服务器的消息事件
this.socketTask.onMessage((res) => {
console.log("WebSocket服务器的消息事件", res);
// 1. 先去除尾部的分隔符 \u001e
let dataStr = res.data;
if (dataStr.charCodeAt(dataStr.length - 1) === 0x1e) {
dataStr = dataStr.substring(0, dataStr.length - 1);
}
// 2. 解析 JSON 字符串
const dataObj = JSON.parse(dataStr);
console.log("解析后的数据对象:", dataObj);
console.log("type:", dataObj.type);
console.log("target:", dataObj.target);
console.log("arguments:", dataObj.arguments);
if (dataObj.target === 'UserInfo') {
this.UserHubId = dataObj.arguments[0]
console.log("this.UserHubId", this.UserHubId)
}
})
},
CloseSokt() { //关闭
this.socketTask.close({
success: () => {
console.log("已关闭")
},
fail: (err) => {
console.log("关闭出错", err)
}
})
},
sendSocketMessageStr_1(msg) {
this.socketTask.send({
data: msg,
success: (data) => {
console.log("成功发送信息", data)
},
fail: (err) => {
console.log("错误信息", res)
}
})
},
//发送消息
sendSocketMessageStr_2() {
const msgId = Date.now().toString() + Math.random().toString(36).substr(2, 9);
const msgObj = {
type: 1,
target: "SendMessage",
arguments: [{
UserHubId: this.UserHubId,
MsgId: msgId,
ChatTxt: this.mes,
TxtType: 0,
duration: 0
}]
}
// 将对象转换为JSON字符串,并添加分隔符(根据服务器要求,可能是0x1e)
const msgStr = JSON.stringify(msgObj) + String.fromCharCode(0x1e);
console.log('msgObj', msgObj)
this.socketTask.send({
data: msgStr,
success: (data) => {
console.log("成功发送信息", data)
},
fail: (err) => {
console.log("错误信息", res)
}
})
},
//打开相机
openchooseImage() {
uni.chooseImage({
count: 6, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['camera'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
}
}
}
</script>