uni-app 即时通讯 pc聊天模板

在开发基于uni-app的即时通讯PC聊天模板时，可以利用WebSocket来实现实时通信功能。以下是一个简化的代码示例，展示了如何在uni-app中创建一个基本的聊天界面，并通过WebSocket与服务器进行通信。

前端（uni-app）

1. 创建页面结构

在pages/chat/chat.vue中，创建一个简单的聊天界面：

<template>
  <view class="chat-container">
    <scroll-view scroll-y="true" style="height: 100%;">
      <view v-for="(message, index) in messages" :key="index" class="message">
        <text :class="{'me': message.from === 'me', 'other': message.from !== 'me'}">{{ message.content }}</text>
      </view>
    </scroll-view>
    <input v-model="newMessage" @confirm="sendMessage" placeholder="Type a message..." />
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
      socket: null,
    };
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.socket = uni.connectSocket({
        url: 'wss://your-websocket-server-url',
      });

      this.socket.onMessage(message => {
        this.messages.push(JSON.parse(message.data));
      });

      this.socket.onError(error => {
        console.error('WebSocket Error:', error);
      });

      this.socket.onClose(() => {
        console.log('WebSocket Closed');
      });
    },
    sendMessage() {
      if (this.newMessage.trim()) {
        this.socket.send({
          type: 'message',
          from: 'me',
          content: this.newMessage,
        });
        this.newMessage = '';
      }
    },
  },
};
</script>

<style>
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.message {
  margin: 5px 0;
}
.me {
  align-self: flex-end;
}
.other {
  align-self: flex-start;
}
input {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>

后端（示例使用Node.js和ws库）

后端WebSocket服务器可以使用Node.js和ws库来搭建：

const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });

server.on('connection', ws => {
  ws.on('message', message => {
    const parsedMessage = JSON.parse(message);
    // Broadcast message to all clients except sender
    server.clients.forEach(client => {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(JSON.stringify(parsedMessage));
      }
    });
  });

  ws.on('close', () => {
    console.log('Client disconnected');
  });
});

console.log('WebSocket server is running on ws://localhost:8080');

这个示例展示了如何通过WebSocket在uni-app中实现一个简单的即时通讯PC聊天模板。实际应用中，你可能需要添加更多的功能，如用户身份验证、消息存储、错误处理等。