You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.2 KiB
129 lines
3.2 KiB
<template>
|
|
<niu-page>
|
|
<niu-navbar fixed color="white" bg="#39b54a">
|
|
Socket
|
|
</niu-navbar>
|
|
<view class="content">
|
|
<view class="input-box">
|
|
<input type="text" v-model="loginName" :disabled="isLogin" class="input" placeholder="请输入名字">
|
|
<view class="button success" @click="connect">连接</view>
|
|
<view class="button del" @click="disconnect">断开</view>
|
|
</view>
|
|
<view class="input-box">
|
|
<input type="text" v-model="msg" class="input" placeholder="请输入消息">
|
|
<view class="button" @click="submit">提交</view>
|
|
</view>
|
|
<view class="talkbox" v-for="(item, index) in msgList" :key="index">
|
|
<view v-if="item.ev==='msg'" class="msg">
|
|
<view class="text">
|
|
{{item.data}}
|
|
</view>
|
|
</view>
|
|
<view class="other talk" v-if="item.ev==='text'&&item.user&&item.user.id!=loginName">
|
|
<view class="talk__info">
|
|
{{item.user.id}}
|
|
</view>
|
|
<view class="talk__content" @click="clickSend(item,index)">
|
|
<view class="text">
|
|
{{item.data}}
|
|
</view>
|
|
<view class="error" v-if="item._success==2"></view>
|
|
</view>
|
|
</view>
|
|
<view class="my talk" v-if="item.ev==='text'&&(item.user&&item.user.id==loginName || item._success==2)">
|
|
<view class="talk__content" @click="clickSend(item,index)">
|
|
<view class="error" v-if="item._success==2"></view>
|
|
<view class="text">
|
|
{{item.data}}
|
|
</view>
|
|
</view>
|
|
<view class="talk__info">
|
|
{{loginName}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</niu-page>
|
|
</template>
|
|
|
|
<script>
|
|
import socket, {
|
|
Msg
|
|
} from "./socket.js"
|
|
export default {
|
|
data() {
|
|
return {
|
|
isLogin: false,
|
|
loginName: '',
|
|
msg: '',
|
|
msgList: []
|
|
};
|
|
},
|
|
onLoad() {
|
|
socket.event.on("onOpen", this.onOpen)
|
|
socket.event.on("onClose", this.onClose)
|
|
socket.event.on("onMessage", this.onMessage)
|
|
},
|
|
beforeDestroy() {
|
|
socket.event.off("onMessage", this.onMessage)
|
|
socket.event.off("onOpen", this.onOpen)
|
|
socket.close()
|
|
},
|
|
methods: {
|
|
async onClose() {
|
|
this.isLogin = false
|
|
},
|
|
async onOpen() {
|
|
this.isLogin = true
|
|
socket.send(Msg.create("login", this.loginName, 0))
|
|
/**
|
|
* 自动发送未成功的消息
|
|
*/
|
|
// let list = this.msgList.filter(v=>v._success!==1).reverse();
|
|
// this.msgList = this.msgList.filter(v=>v._success==1);
|
|
// let len = list.length;
|
|
// for (var i = len -1; i >= 0; i--) {
|
|
// const msg = list[i]
|
|
// if(msg&&msg._success!==1){
|
|
// await socket.send({...msg, _success: 0})
|
|
// }
|
|
// }
|
|
},
|
|
onMessage(data) {
|
|
console.log("onMessage", data);
|
|
if (data.ev === "text") {
|
|
this.msgList.push(data)
|
|
}
|
|
if (data.ev === "msg") {
|
|
this.msgList.push(data)
|
|
}
|
|
},
|
|
async clickSend(msg, i) {
|
|
if (msg._success == 2) {
|
|
this.msgList.splice(i, 1);
|
|
try {
|
|
await socket.send(Msg.clone(msg, 0))
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
},
|
|
connect() {
|
|
if(!this.loginName) return
|
|
socket.initConnect()
|
|
},
|
|
disconnect() {
|
|
socket.close()
|
|
},
|
|
async submit() {
|
|
if (this.msg == "") return
|
|
await socket.send(Msg.create("text", this.msg, 0))
|
|
this.msg = ""
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "./Socket.scss";
|
|
</style>
|
|
|