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: "/",
name: "LayoutView",
redirect: "/home",
component: LayoutView,
//重定向到home
redirect: "/home",
children: [
{

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

@ -10,7 +10,7 @@
<div class="word" v-if="!message.isMine">
<div class="information">
<p>{{ message.nickName }} {{ message.time }}</p>
<p>{{ message.nickname }} {{ message.sendTime }}</p>
</div>
<div class="info">
<el-avatar :src="message.pic" class="head"></el-avatar>
@ -27,7 +27,7 @@
<div class="word-my" v-else>
<div class="outer">
<div class="information">
<p>{{ message.time }} {{ message.nickName }} </p>
<p>{{ message.sendTime }} {{ message.nickname }} </p>
</div>
<div class="info">
<div class="message">
@ -57,6 +57,7 @@
</template>
<script>
let socket;
export default {
data() {
@ -64,61 +65,64 @@ export default {
messageList: [
{
nickName: 'Cool',
nickname: 'Cool',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 15:23:18',
sendTime: '2023/11/20 15:23:18',
message: '我怎么把文件放在服务器上，然后在公网对他进行访问?',
isMine: false,
},
{
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
},
{
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: true,
}, {
nickName: 'COOL',
nickname: 'COOL',
pic: require("@/assets/img/cool.jpg"),
time: '2023/11/20 18:23:18',
sendTime: '2023/11/20 18:23:18',
message: '先xx后xx再xx',
isMine: false,
},
],
textarea: "",
myName:'',
myPic:'',
};
},
mounted() {
@ -126,6 +130,48 @@ export default {
container.scrollTop = container.scrollHeight;
},
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) {
//发送消息
@ -156,6 +202,7 @@ export default {
height: 2px;
background-color: rgb(231, 231, 231);
border: none;
}
}
@ -234,6 +281,7 @@ export default {
}
.info {
margin-left: 20px;
margin-top: 10px;
font-size: 16px;
@ -252,7 +300,8 @@ export default {
position: relative;
font-size: 16px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
background-color: #95ec69;
max-width: 70%;
min-height: 40px;
//上下居中
@ -269,7 +318,7 @@ export default {
border: 8px solid transparent;
top: 10px;
/*移到中间*/
border-left-color: #ffffff;
border-left-color: #95ec69;
right: -16px;
}
}