clay: 代码开始处理
This commit is contained in:
parent
f7c86eceae
commit
140c6cbc7c
|
|
@ -24,6 +24,7 @@
|
|||
"@vue/cli-service": "~5.0.0",
|
||||
"@vue/eslint-config-standard": "^6.1.0",
|
||||
"sass": "^1.32.7",
|
||||
"axios": "^0.24.0",
|
||||
"sass-loader": "^12.0.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<el-avatar :size="50" :src="head" class="head"/>
|
||||
<div class="left">
|
||||
<div v-if="!userChange" @click="userChange = true" class="name">{{ user.nickName }}</div>
|
||||
<el-input v-if="userChange" placeholder="请输入昵称" @blur="blurChange" v-model="user.nickName" class="inputName"
|
||||
<el-input v-if="userChange" placeholder="请输入昵称" v-model="user.nickName" class="inputName"
|
||||
@keyup.enter="sendMsg"></el-input>
|
||||
<div v-if="user.state" class="online">Online</div>
|
||||
<div v-if="!user.state" class="onclose">OnClose</div>
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
<script>
|
||||
import head from '../assets/head.png'
|
||||
import {ElMessage} from 'element-plus'
|
||||
import axios from 'axios'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
|
|
@ -74,7 +75,6 @@ export default {
|
|||
head: head,
|
||||
inputValue: '',
|
||||
websocket: {
|
||||
// url: "ws://chatapi.odliken.cn/websocket/",
|
||||
url: 'ws://localhost:8000/netty-ws/ws',
|
||||
type: 'primary',
|
||||
data: ''
|
||||
|
|
@ -98,10 +98,6 @@ export default {
|
|||
connect(num, type) {
|
||||
this.websocket.type = 'success'
|
||||
let url = this.websocket.url;
|
||||
// if (type == 1) {
|
||||
// // url = url + "?userId=" + num + "&token=token"
|
||||
// url = url + "?userId=1681478908550&token=token"
|
||||
// }
|
||||
this.webSock = new WebSocket(url)
|
||||
// 客户端接收服务端数据时触发
|
||||
this.webSock.onmessage = this.webSocketOnMessage
|
||||
|
|
@ -113,31 +109,14 @@ export default {
|
|||
this.webSock.onclose = this.webSocketClose
|
||||
},
|
||||
|
||||
// 连接建立时触发
|
||||
// 连接建立时触发
|
||||
webSocketOnOpen() {
|
||||
this.user.state = false
|
||||
this.webSock.send(JSON.stringify({
|
||||
type: "auth",
|
||||
id:1681478908550,
|
||||
message:1681478908550
|
||||
id: 1681478908550,
|
||||
message: 1681478908550
|
||||
}))
|
||||
|
||||
|
||||
// 开始发送 PingWebSocketFrame
|
||||
// this.pingTimer = setInterval(() => {
|
||||
// this.webSock.send(JSON.stringify({
|
||||
// type: "ping"
|
||||
// }))
|
||||
// }, 5000)
|
||||
//开启心跳
|
||||
this.start()
|
||||
this.blurChange()
|
||||
//连接建立之后执行send方法发送数据
|
||||
//可以发送一些用户基本信息
|
||||
// let actions = {
|
||||
// 'room': '007854ce7b93476487c7ca8826d17eba',
|
||||
// 'info': '1121212'
|
||||
// }
|
||||
// this.webSocketSend(JSON.stringify(actions))
|
||||
},
|
||||
// 通信发生错误时触发
|
||||
webSocketOnError() {
|
||||
|
|
@ -146,39 +125,34 @@ export default {
|
|||
},
|
||||
// todo 客户端接收服务端数据时触发
|
||||
webSocketOnMessage(e) {
|
||||
// console.log(e.data)
|
||||
// console.log('接受数据')
|
||||
// let data = null
|
||||
// try {
|
||||
// data = JSON.parse(e.data)
|
||||
// if (null != data) {
|
||||
// this.processData(data)
|
||||
// }
|
||||
// } catch (e) {
|
||||
// console.log(e)
|
||||
// }
|
||||
// console.log(data, 'data')
|
||||
// if (!data.none){
|
||||
// }
|
||||
//收到服务器信息，心跳重置
|
||||
this.reset()
|
||||
console.log(e.data)
|
||||
console.log('接受数据')
|
||||
let data = null
|
||||
try {
|
||||
data = JSON.parse(e.data)
|
||||
if (null != data) {
|
||||
// this.processData(data)
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
}
|
||||
},
|
||||
//处理数据
|
||||
processData(data) {
|
||||
if (data.type == 1) {
|
||||
if (data.type === 1) {
|
||||
console.log(data)
|
||||
this.addUserInfo(data.data)
|
||||
console.log(this.asideList)
|
||||
} else if (data.type == 2) {
|
||||
} else if (data.type === 2) {
|
||||
this.asideList = []
|
||||
for (let item of data.data) {
|
||||
this.addUserInfo(item)
|
||||
}
|
||||
} else if (data.type == 3) {
|
||||
} else if (data.type === 3) {
|
||||
this.removeUser(data.data.userId)
|
||||
} else if (data.type == 4) {
|
||||
} else if (data.type === 4) {
|
||||
this.receiveMessage(data.data)
|
||||
} else if (data.type == 5) {
|
||||
} else if (data.type === 5) {
|
||||
this.removeUser(data.data.userId)
|
||||
this.addUserInfo(data.data)
|
||||
}
|
||||
|
|
@ -198,7 +172,7 @@ export default {
|
|||
|
||||
getUSerInfo(userId) {
|
||||
for (const user of this.asideList) {
|
||||
if (userId == user.uuid) {
|
||||
if (userId === user.uuid) {
|
||||
return user.nickName
|
||||
}
|
||||
}
|
||||
|
|
@ -208,7 +182,7 @@ export default {
|
|||
let index = null
|
||||
for (let i = 0; i < this.asideList; i++) {
|
||||
let item = this.asideList[i]
|
||||
if (userId == item.uuid) {
|
||||
if (userId === item.uuid) {
|
||||
index = i
|
||||
break
|
||||
}
|
||||
|
|
@ -225,18 +199,10 @@ export default {
|
|||
}
|
||||
this.asideList.push(user)
|
||||
},
|
||||
|
||||
webSocketSend(data) {
|
||||
//数据发送
|
||||
// this.webSock.send(JSON.stringify(data))
|
||||
},
|
||||
// 连接关闭时触发
|
||||
webSocketClose(e) {
|
||||
//关闭
|
||||
console.log('断开连接', e)
|
||||
this.user.state = false
|
||||
//重连
|
||||
this.reconnect()
|
||||
},
|
||||
reconnect() {
|
||||
//重新连接
|
||||
|
|
@ -253,75 +219,36 @@ export default {
|
|||
that.lockReconnect = false
|
||||
}, 5000)
|
||||
},
|
||||
reset() {
|
||||
//重置心跳
|
||||
let that = this
|
||||
//清除时间
|
||||
clearTimeout(that.timeoutObj)
|
||||
clearTimeout(that.serverTimeoutObj)
|
||||
//重启心跳
|
||||
that.start()
|
||||
},
|
||||
|
||||
start() {
|
||||
//开启心跳
|
||||
console.log('开启心跳')
|
||||
this.user.state = true
|
||||
let self = this
|
||||
self.timeoutObj && clearTimeout(self.timeoutObj)
|
||||
self.serverTimeoutObj && clearTimeout(self.serverTimeoutObj)
|
||||
self.timeoutObj = setTimeout(function () {
|
||||
//这里发送一个心跳，后端收到后，返回一个心跳消息，
|
||||
if (self.ws.readyState == 1) {
|
||||
//如果连接正常
|
||||
// self.ws.send("heartCheck"); //这里可以自己跟后端约定
|
||||
} else {
|
||||
//否则重连
|
||||
self.reconnect()
|
||||
}
|
||||
self.serverTimeoutObj = setTimeout(function () {
|
||||
//超时关闭
|
||||
self.ws.close()
|
||||
}, self.timeout)
|
||||
}, self.timeout)
|
||||
},
|
||||
|
||||
//选择用户uuid
|
||||
selectUser(uuid) {
|
||||
console.log(uuid)
|
||||
this.sendUserId = uuid
|
||||
},
|
||||
blurChange() {
|
||||
this.userChange = false
|
||||
let data = {
|
||||
type: 5,
|
||||
data: this.user.nickName
|
||||
}
|
||||
this.webSocketSend(data)
|
||||
},
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
*/
|
||||
sendMsg() {
|
||||
if (null == this.sendUserId) {
|
||||
ElMessage({
|
||||
showClose: false,
|
||||
message: '请选择需要发送的用户!',
|
||||
type: 'error',
|
||||
})
|
||||
return
|
||||
}
|
||||
// console.log(this.inputValue);
|
||||
let data = {
|
||||
type: 4,
|
||||
data: {
|
||||
sendUserId: this.sendUserId,
|
||||
nickName: this.user.nickName,
|
||||
contactText: this.inputValue
|
||||
}
|
||||
id: 1681478908550,
|
||||
message: this.inputValue,
|
||||
type: "messageUser"
|
||||
}
|
||||
this.webSocketSend(data)
|
||||
console.log(data,"data")
|
||||
axios.get("http://localhost:8000/netty/msg/msg", data).then(res => {
|
||||
console.log(res)
|
||||
})
|
||||
|
||||
|
||||
// console.log(this.inputValue);
|
||||
// let data = {
|
||||
// type: 4,
|
||||
// data: {
|
||||
// sendUserId: this.sendUserId,
|
||||
// nickName: this.user.nickName,
|
||||
// contactText: this.inputValue
|
||||
// }
|
||||
// }
|
||||
let msg = {
|
||||
id: this.user.id,
|
||||
headUrl: head,
|
||||
|
|
|
|||
|
|
@ -9,12 +9,12 @@ spring:
|
|||
name: gateway
|
||||
profiles:
|
||||
# 环境配置
|
||||
active: local
|
||||
active: dev
|
||||
cloud:
|
||||
nacos:
|
||||
discovery:
|
||||
# 服务注册地址
|
||||
server-addr: 192.168.101.108:8848
|
||||
server-addr: 119.8.123.240:8848
|
||||
username: nacos
|
||||
password: nacos
|
||||
namespace: ${spring.profiles.active}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
server:
|
||||
port: 8084
|
||||
port: 8080
|
||||
|
||||
|
||||
# Spring
|
||||
|
|
@ -11,12 +11,24 @@ spring:
|
|||
nacos:
|
||||
discovery:
|
||||
# 服务注册地址
|
||||
server-addr: 192.168.101.108:8848
|
||||
server-addr: 119.8.123.240:8848
|
||||
username: nacos
|
||||
password: nacos
|
||||
namespace: local
|
||||
namespace: dev
|
||||
|
||||
redis:
|
||||
host: 1.14.94.250
|
||||
password: Hcy@2023
|
||||
port: 6379
|
||||
database: 8
|
||||
|
||||
rabbitmq:
|
||||
username: guest
|
||||
password: guest
|
||||
addresses: 152.136.148.167
|
||||
port: 5672
|
||||
|
||||
|
||||
websocket:
|
||||
application-name: ${spring.application.name}-ws
|
||||
port: 8085
|
||||
port: 8090
|
||||
Loading…
Reference in New Issue