第二次冲刺10（5.24）

聊天群的实现有点难，所以可能实现不聊了（完成度没有这么好），这次还要测试。

<template>

  <view class="container">

    <view class="messages">

      <view v-for="(message, index) in messages" :key="index" class="message">

        <text class="username">{{ message.username }}:</text>

        <text>{{ message.content }}</text>

      </view>

    </view>

    <view class="input-section">

      <input v-model="newMessage" placeholder="输入消息..." class="input-box"/>

      <button @click="sendMessage">发送</button>

    </view>

  </view>

</template>

 

<script>

export default {

  data() {

    return {

      newMessage: '',

      messages: []

    };

  },

  onLoad() {

    // 初始化 WebSocket 连接

    this.initWebSocket();

  },

  methods: {

    initWebSocket() {

      // 初始化 WebSocket 连接并设置事件处理函数

      this.socket = uni.connectSocket({

        url: 'ws://your-websocket-url',

        success: () => {

          console.log('WebSocket 连接成功');

        }

      });

 

      this.socket.onMessage((res) => {

        let message = JSON.parse(res.data);

        this.messages.push(message);

      });

 

      this.socket.onOpen(() => {

        console.log('WebSocket 连接已打开');

      });

 

      this.socket.onClose(() => {

        console.log('WebSocket 连接已关闭');

      });

 

      this.socket.onError((error) => {

        console.error('WebSocket 连接出错', error);

      });

    },

    sendMessage() {

      if (this.newMessage.trim() === '') {

        return;

      }

      let message = {

        username: '当前用户',

        content: this.newMessage

      };

      this.socket.send({

        data: JSON.stringify(message),

        success: () => {

          this.messages.push(message);

          this.newMessage = '';

        },

        fail: (err) => {

          console.error('消息发送失败', err);

        }

      });

    }

  },

  onUnload() {

    // 页面卸载时关闭 WebSocket 连接

    if (this.socket) {

      this.socket.close();

    }

  }

};

</script>

 

<style scoped>

.container {

  display: flex;

  flex-direction: column;

  height: 100%;

  padding: 10px;

}

.messages {

  flex: 1;

  overflow-y: auto;

  margin-bottom: 10px;

}

.message {

  margin-bottom: 5px;

}

.username {

  font-weight: bold;

  margin-right: 5px;

}

.input-section {

  display: flex;

}

.input-box {

  flex: 1;

  padding: 10px;

  border: 1px solid #ccc;

  border-radius: 5px;

}

button {

  padding: 10px 15px;

  margin-left: 10px;

  background-color: #007bff;

  color: white;

  border: none;

  border-radius: 5px;

}

</style>