根据上面的代码，帮我写一个前端vue实现的与这个socket连接

好的，以下是一个简单的使用Vue.js实现的前端页面，可以与上面的后端代码进行连接：

<template>
  <div>
    <h1>与AI对话</h1>
    <div class="chatbox">
      <div v-for="(msg, index) in messages" :key="index">
        <div v-if="msg.type === 'sent'">
          <span class="sent-msg">{{ msg.text }}</span>
        </div>
        <div v-else-if="msg.type === 'received'">
          <span class="received-msg">{{ msg.text }}</span>
        </div>
      </div>
    </div>
    <form @submit.prevent="sendMessage">
      <input v-model="newMessage" type="text" placeholder="输入消息">
      <button type="submit">发送</button>
    </form>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      socket: null,
      messages: [],
      newMessage: ''
    }
  },
  mounted() {
    this.socket = io('http://localhost:5000');
    this.socket.on('connect', () => {
      console.log('已连接到服务器');
    });
    this.socket.on('message', (data) => {
      console.log('收到服务器消息', data);
      this.messages.push({ type: 'received', text: data });
    });
    this.socket.on('disconnect', () => {
      console.log('与服务器断开连接');
    });
  },
  methods: {
    sendMessage() {
      if (this.newMessage !== '') {
        console.log('发送消息', this.newMessage);
        this.messages.push({ type: 'sent', text: this.newMessage });
        this.socket.emit('message', this.newMessage);
        this.newMessage = '';
      }
    }
  }
}
</script>

<style>
.chatbox {
  border: 1px solid gray;
  height: 300px;
  overflow-y: scroll;
}
.sent-msg {
  background-color: lightgray;
  padding: 5px;
  border-radius: 10px;
  float: right;
  margin: 5px;
  max-width: 50%;
}
.received-msg {
  background-color: #e5e5e5;
  padding: 5px;
  border-radius: 10px;
  float: left;
  margin: 5px;
  max-width: 50%;
}
</style>

在这个页面中，我们首先导入了`socket.io-client`库，用于创建与服务器的WebSocket连接。然后在`mounted`钩子函数中，我们创建了一个WebSocket连接，并监听了`connect`、`message`和`disconnect`事件。其中，`message`事件用于接收服务器发送过来的消息，并将其添加到`messages`数组中。

页面中的`sendMessage`方法用于发送消息。当用户在输入框中输入消息并点击发送按钮时，该方法会将消息添加到`messages`数组中，并通过WebSocket连接将其发送到服务器。发送完成后，输入框的内容会被清空。

最后，我们使用Vue.js的模板语法将`messages`数组中的消息渲染到页面上，形成一个简单的聊天界面。