uniapp websocket 实现聊天 写出前端代码

UniApp利用WebSocket实现实时聊天功能，前端代码通常会涉及HTML、JavaScript以及uni-app提供的WebSocket API。下面是一个简单的前端示例：

<template>
  <view class="chat-view">
    <input v-model="message" placeholder="输入消息..." @keyup.enter="sendMessage" />
    <ul ref="messageList">
      <li v-for="(item, index) in messages" :key="index">{{ item.message }}</li>
    </ul>
  </chat-view>
</template>

<script>
export default {
  data() {
    return {
      message: '',
      messages: [],
    };
  },
  methods: {
    sendMessage() {
      if (this.message) {
        this.$emit('onSendMessage', { username: 'YourName', message: this.message });
        // 发送到服务器的部分省略了，一般通过uni.socket.io发送
        this.message = '';
      }
    },
    receiveMessage(data) {
      this.messages.push({ username: data.username, message: data.message });
    },
  },
  onSocketEvent: {
    onConnect() {
      console.log('连接成功');
    },
    onMessage(data) {
      this.receiveMessage(data);
    },
  },
};
</script>

<style scoped>
.chat-view {
  padding: 10px;
}
</style>

在这个例子中，用户可以在输入框里输入消息，然后点击“Enter”键触发`sendMessage`方法，该方法会向后端发送一条包含用户名和消息的数据。当接收到服务端的消息更新时，`receiveMessage`会在`onMessage`事件中处理并显示在页面上。

注意：以上代码只是一个基础的前端展示部分，实际应用中你需要配合uniapp的WebSocket插件如`uni.socket.io`来创建和管理WebSocket连接，具体如何配置和建立连接到后端服务器，那部分需要参考uniapp官方文档或其他教程。