websocket+elementui+vue实现简易聊天室

以下是一个使用 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 数组中，这个数组绑定了列表来显示历史消息。