以下是一个使用 Vue.js、Element UI 和 WebSocket 实现的简易聊天室的核心代码示例：
<template>
<el-container style="height: 100vh;">
<el-header>简易聊天室</el-header>
<el-main>
<el-input
type="textarea"
v-model="message"
placeholder="请输入内容"
@keyup.enter.native="sendMessage"
></el-input>
<el-button type="primary" @click="sendMessage">发送</el-button>
<el-divider></el-divider>
<ul>
<li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
</ul>
</el-main>
</el-container>
</template>
<script>
export default {
data() {
return {
ws: null,
message: '',
messages: []
};
},
created() {
this.connectWebSocket();
},
methods: {
connectWebSocket() {
this.ws = new WebSocket('ws://localhost:8080');
this.ws.onopen = () => console.log('WebSocket 连接成功');
this.ws.onerror = () => console.log('WebSocket 连接发生错误');
this.ws.onmessage = ({ data }) => {
this.messages.push(data);
};
},
sendMessage() {
if (this.message.trim()) {
this.ws.send(this.message.trim());
this.message = '';
}
}
}
};
</script>
<style>
body, ul, li {
margin: 0;
padding: 0;
list-style: none;
}
.el-container {
width: 100%;
}
.el-header {
text-align: center;
line-height: 60px;
}
.el-main {
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
}
.el-input textarea {
resize: none;
height: 150px;
}
</style>这段代码实现了一个简易的聊天室界面，使用 Element UI 的布局组件和表单组件来构建界面，并使用 WebSocket 实现了消息的发送和接收。在创建组件时，它会尝试连接到 ws://localhost:8080 的 WebSocket 服务器。发送消息时，它会清空输入框，并将消息推送到 messages 数组中，这个数组绑定了列表来显示历史消息。