vue里创建websocket服务端，并用按钮开启关闭

在Vue中创建WebSocket服务端可以使用`WebSocket`对象。以下是一个简单的示例：

<template>
  <div>
    <button @click="toggleConnection">{{ isConnected ? '关闭' : '开启' }}</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      socket: null,
      isConnected: false,
    };
  },
  methods: {
    toggleConnection() {
      if (this.isConnected) {
        this.socket.close();
        this.socket = null;
        this.isConnected = false;
      } else {
        const url = 'ws://localhost:8080'; // WebSocket服务器地址
        this.socket = new WebSocket(url);
        this.socket.onopen = () => {
          this.isConnected = true;
        };
        this.socket.onclose = () => {
          this.isConnected = false;
        };
      }
    },
  },
};
</script>

上面的示例中，我们使用`socket`变量来保存`WebSocket`对象，并使用`isConnected`变量来表示连接状态。在`toggleConnection`方法中，我们切换连接状态：如果当前已经连接，则关闭连接；否则，创建`WebSocket`对象并连接到服务器。

你可以根据自己的需求修改上面的示例。例如，你可以在`onmessage`方法中处理来自服务器的消息。