使用websocket+vue写一个小demo

### 回答1：
好的，我可以为你提供一个使用 WebSocket 和 Vue 实现的简单示例。

首先，你需要安装 `vue-socket.io` 包，它可以让你在 Vue 中方便地使用 WebSocket：

npm install vue-socket.io

然后，在你的 Vue 组件中引入 `vue-socket.io`：

import VueSocketIO from 'vue-socket.io'

export default {
  ...
  components: {
    ...
    VueSocketIO,
  },
  ...
}

接着，你可以在组件的 `mounted()` 钩子函数中创建一个 WebSocket 连接：

mounted() {
  this.$socket = io('ws://localhost:3000')
  this.$socket.on('connect', () => {
    console.log('连接成功')
  })
  this.$socket.on('disconnect', () => {
    console.log('连接断开')
  })
}

在这里，我们使用了 `io()` 函数来连接 WebSocket 服务器，并使用 `on()` 函数监听连接和断开事件。

接下来，你可以使用 `send()` 函数向服务器发送消息，或者使用 `on()` 函数监听服务器发送的消息：

sendMessage() {
  this.$socket.send('这是一条消息')
},

mounted() {
  ...
  this.$socket.on('message', (message) => {
    console.log('收到消息：', message)
  })
  ...
}

这就是使用 WebSocket 和 Vue 实现的一个简单示例。希望这对你有帮助。

### 回答2：
WebSocket是一种在客户端与服务器之间建立持久连接的通信协议，可以实现双向实时通信。在Vue中使用WebSocket可以方便地实现实时更新和通信功能。

首先，在Vue项目中安装并引入`websocket`库。可以通过命令`npm install websocket`来安装。

在Vue组件中，我们可以创建一个WebSocket的实例，并设置连接的URL。在`created`生命周期钩子函数中，我们可以初始化WebSocket连接，并监听相应的事件。

import WebSocket from 'websocket';

export default {
  data() {
    return {
      socket: null,
      message: '',
      receivedMessage: ''
    }
  },
  created() {
    this.socket = new WebSocket('ws://localhost:8080'); // 设置连接的URL
    this.socket.onopen = () => { // 监听连接建立事件
      console.log('WebSocket连接已建立');
    }
    this.socket.onmessage = (event) => { // 监听消息接收事件
      this.receivedMessage = event.data;
    }
    this.socket.onclose = () => { // 监听连接关闭事件
      console.log('WebSocket连接已关闭');
    }
  },
  methods: {
    sendMessage() { // 发送消息
      this.socket.send(this.message);
    }
  }
}

在模板中，我们可以通过双向绑定的方式来实时更新消息的发送和接收。

<template>
  <div>
    <input v-model="message" type="text" placeholder="请输入消息" />
    <button @click="sendMessage">发送</button>
    <p>接收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

上述代码中，我们创建了一个WebSocket实例，并监听了`open`、`message`、`close`事件，分别在连接建立、接收消息和关闭连接时触发相应的回调函数。在发送消息时，调用`socket.send()`方法发送消息。

这样，当我们在输入框中输入消息并点击发送按钮时，即可将消息发送给服务器，并且将服务器返回的消息实时显示在页面上，实现了一个使用WebSocket的小demo。