vue和websocket实现在线聊天，画出自己聊天框和他人聊天框样式，详细代码

好的，这是一个比较完整的 Vue.js + WebSocket 实现在线聊天的例子，包括样式和代码：

首先，需要引入 Vue.js 和 WebSocket 相关的库：

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.9.2/qs.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>

然后，在 Vue 实例中定义聊天室的组件：

<template>
  <div class="chat-room">
    <div class="chat-box">
      <div class="chat-history">
        <div v-for="(message, index) in messages" :key="index">
          <div :class="{'my-message': message.isMine, 'other-message': !message.isMine}">
            <div class="message-text">{{ message.text }}</div>
            <div class="message-time">{{ message.time }}</div>
          </div>
        </div>
      </div>
      <div class="chat-input">
        <input v-model="inputText" @keydown.enter="sendMessage" placeholder="输入消息...">
        <button @click="sendMessage">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      inputText: ''
    }
  },
  created() {
    // 初始化 WebSocket 连接
    this.socket = io('ws://localhost:3000')
    this.socket.on('message', (data) => {
      this.messages.push({
        text: data.message,
        time: data.time,
        isMine: false
      })
    })
  },
  methods: {
    sendMessage() {
      if (this.inputText.trim() === '') {
        return
      }
      this.messages.push({
        text: this.inputText,
        time: new Date().toLocaleTimeString(),
        isMine: true
      })
      this.socket.emit('message', {
        message: this.inputText,
        time: new Date().toLocaleTimeString()
      })
      this.inputText = ''
    }
  }
}
</script>

<style scoped>
.chat-room {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.chat-box {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 600px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.chat-history {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.my-message {
  display: flex;
  flex-direction: row-reverse;
}

.other-message {
  display: flex;
  flex-direction: row;
}

.message-text {
  min-width: 80px;
  max-width: 200px;
  background-color: #eee;
  padding: 5px;
  border-radius: 5px;
  margin: 5px;
}

.message-time {
  font-size: 10px;
  color: #999;
  margin: 5px;
}
.chat-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  border-top: 1px solid #ccc;
}

.chat-input input {
  flex: 1;
  height: 30px;
  border-radius: 5px;
  padding: 5px;
  font-size: 14px;
  outline: none;
  border: none;
}

.chat-input button {
  height: 30px;
  width: 80px;
  border-radius: 5px;
  background-color: #3f51b5;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
}
</style>

最后，在 Vue 的路由中添加聊天室的路径：

const routes = [
  {
    path: '/chat',
    name: 'ChatRoom',
    component: ChatRoom
  }
]

这样，就可以通过访问 `/chat` 路径来进入聊天室页面了。当用户在输入框中输入消息并发送时，页面会实时更新并将消息发送给服务器，其他用户也能够实时收到并显示在页面上。

需要注意的是，这里假设服务器已经部署好，并且使用 WebSocket 来实现消息的实时传输。如果你需要在本地测试，可以使用 `socket.io` 库来模拟 WebSocket 服务器，并且需要将 `ws://localhost:3000` 替换为你本地服务器的地址。