Cool
/
Chat-Vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

20231121版本，websocket尚未完成

This commit is contained in:
Cool 2023-11-21 20:57:43 +08:00
parent 963e5c93e1
commit 0c0c2df66d
2 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/router/index.js
View File

@ -9,9 +9,9 @@ const routes = [
{ {
path: "/", path: "/",
name: "LayoutView", name: "LayoutView",
redirect: "/home",
component: LayoutView, component: LayoutView,
//重定向到home //重定向到home
redirect: "/home",
children: [ children: [
{ {

89
src/views/main/Chat.vue
View File

@ -10,7 +10,7 @@
<div class="word" v-if="!message.isMine"> <div class="word" v-if="!message.isMine">
<div class="information"> <div class="information">
<p>{{ message.nickName }} {{ message.time }}</p> <p>{{ message.nickname }} {{ message.sendTime }}</p>
</div> </div>
<div class="info"> <div class="info">
<el-avatar :src="message.pic" class="head"></el-avatar> <el-avatar :src="message.pic" class="head"></el-avatar>
@ -27,7 +27,7 @@
<div class="word-my" v-else> <div class="word-my" v-else>
<div class="outer"> <div class="outer">
<div class="information"> <div class="information">
<p>{{ message.time }} {{ message.nickName }} </p> <p>{{ message.sendTime }} {{ message.nickname }} </p>
</div> </div>
<div class="info"> <div class="info">
<div class="message"> <div class="message">
@ -57,6 +57,7 @@
</template> </template>
<script> <script>
let socket;
export default { export default {
data() { data() {
@ -64,61 +65,64 @@ export default {
messageList: [ messageList: [
{ {
nickName: 'Cool', nickname: 'Cool',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 15:23:18', sendTime: '2023/11/20 15:23:18',
message: '我怎么把文件放在服务器上，然后在公网对他进行访问?', message: '我怎么把文件放在服务器上，然后在公网对他进行访问?',
isMine: false, isMine: false,
}, },
{ {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, },
{ {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, },
{ {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, { }, {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, { }, {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, },
{ {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: true, isMine: true,
}, { }, {
nickName: 'COOL', nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"), pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18', sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx', message: '先xx后xx再xx',
isMine: false, isMine: false,
}, },
], ],
textarea: "", textarea: "",
myName:'',
myPic:'',
}; };
}, },
mounted() { mounted() {
@ -126,6 +130,48 @@ export default {
container.scrollTop = container.scrollHeight; container.scrollTop = container.scrollHeight;
}, },
methods: { methods: {
send(){
if (!this.textarea) {
this.$message({type: 'warning', message: "请输入内容"})
} else {
let SendMessage={
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
sendTime: '2023/11/20 18:23:18',
message: this.textarea,
}
socket.send(SendMessage);
this.textarea = "";
}
},
init() {
if (typeof (WebSocket) === undefined) {
console.log("您的浏览器不支持WebSocket");
} else {
console.log("您的浏览器支持WebSocket");
let socketUrl = "ws://localhost:8888/chat/get";
if (socket != null) {
socket.close();
socket = null;
}
socket = new WebSocket(socketUrl);
socket.onopen = function () {
console.log("websocket已打开");
};
socket.onmessage = function (msg) {
this.messageList = msg
}
socket.onclose = function () {
console.log("websocket已关闭");
};
socket.onerror = function () {
console.log("websocket发生了错误");
}
}
},
SendMessage(textarea) { SendMessage(textarea) {
//发送消息 //发送消息
@ -156,6 +202,7 @@ export default {
height: 2px; height: 2px;
background-color: rgb(231, 231, 231); background-color: rgb(231, 231, 231);
border: none; border: none;
} }
} }
@ -234,6 +281,7 @@ export default {
} }
.info { .info {
margin-left: 20px; margin-left: 20px;
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
@ -252,7 +300,8 @@ export default {
position: relative; position: relative;
font-size: 16px; font-size: 16px;
color: rgb(0, 0, 0); color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255); background-color: #95ec69;
max-width: 70%; max-width: 70%;
min-height: 40px; min-height: 40px;
//上下居中 //上下居中
@ -269,7 +318,7 @@ export default {
border: 8px solid transparent; border: 8px solid transparent;
top: 10px; top: 10px;
/*移到中间*/ /*移到中间*/
border-left-color: #ffffff; border-left-color: #95ec69;
right: -16px; right: -16px;
} }
} }