Vue调用Netty详细示例

首先创建WebSocket连接，然后进行监听连接的打开、消息接收和关闭事件。完整示例如下：

<template>
  <div id="app">
    <h1>WebSocket with Vue.js and Netty</h1>
    <el-input type="text" v-model="message" @keyup.enter="sendMessage">
    <ul>
      <li v-for="msg in messages" :key="msg.id">{{ msg.content }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
      socket: null
    };
  },
  created() {
    // 创建WebSocket连接
    this.socket = new WebSocket('ws://your-netty-server-address:port');

    // 监听连接打开事件
    this.socket.onopen = () => {
      console.log('WebSocket connected');
    };

    // 监听消息接收事件
    this.socket.onmessage = (event) => {
      this.messages.push({ id: this.messages.length + 1, content: event.data });
    };

    // 监听连接关闭事件
    this.socket.onclose = () => {
      console.log('WebSocket disconnected');
    };
  },
  methods: {
    // 发送消息
    sendMessage() {
      this.socket.send(this.message);
      this.messages.push({ id: this.messages.length + 1, content: this.message });
      this.message = '';
    }
  }
};
</script>

<style>
</style>

通过sendMessage方法，我们可以发送消息到服务器，并在页面上显示已发送的消息。请记得将ws://your-netty-server-address:port替换为你实际的Netty服务器地址和端口。