websocket 实现一对一聊天在vue中

要在 Vue 中实现 WebSocket 一对一聊天，可以按照以下步骤进行：

1. 安装 WebSocket 库

可以使用 `npm` 或 `yarn` 安装 `websocket` 库，命令如下：

npm install websocket --save

或者

yarn add websocket

2. 创建 WebSocket 连接

在 Vue 组件中，可以在 `created` 钩子函数中创建 WebSocket 连接，如下所示：

created() {
  this.socket = new WebSocket('ws://localhost:8080');
  this.socket.onopen = event => {
    console.log('WebSocket 连接已建立');
  };
  this.socket.onmessage = event => {
    console.log(`收到消息：${event.data}`);
  };
  this.socket.onclose = event => {
    console.log('WebSocket 连接已关闭');
  };
  this.socket.onerror = error => {
    console.error('WebSocket 连接发生错误', error);
  };
}

其中，`ws://localhost:8080` 是 WebSocket 服务器的地址，可以根据实际情况进行修改。

3. 发送和接收消息

在 Vue 组件中，可以通过输入框和按钮等方式发送消息，代码如下所示：

<template>
  <div>
    <input type="text" v-model="message" />
    <button @click="send">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    };
  },
  methods: {
    send() {
      if (this.message.trim()) {
        this.socket.send(this.message);
        this.message = '';
      }
    },
  },
};
</script>

在接收到消息时，可以将消息展示在页面上，代码如下所示：

this.socket.onmessage = event => {
  this.messages.push(event.data);
};

其中，`messages` 是保存消息的数组。

以上就是在 Vue 中实现 WebSocket 一对一聊天的基本步骤，需要根据具体的需求进行扩展和优化。