uni-app UNI-Chat 简单配置 实现即时通讯

要在uni-app中实现一个基本的即时通讯功能（如UNI-Chat），你需要配置WebSocket来实现实时数据交换。以下是一个简化的代码示例，展示了如何在uni-app中配置WebSocket并实现基本的即时通讯功能。

1. 配置WebSocket

首先，在你的uni-app项目中，你需要配置WebSocket连接。这通常在pages/index/index.vue（或你的主页面）中进行。

<template>
  <view>
    <text>{{ message }}</text>
    <input v-model="inputMessage" placeholder="Type a message" />
    <button @click="sendMessage">Send</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      socketOpen: false,
      message: '',
      inputMessage: '',
      ws: null,
    };
  },
  mounted() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.ws = uni.connectSocket({
        url: 'wss://your-websocket-server-url', // 替换为你的WebSocket服务器URL
        success: () => {
          console.log('WebSocket连接已打开');
          this.socketOpen = true;
        },
        fail: (err) => {
          console.error('WebSocket连接失败', err);
        },
      });

      this.ws.onMessage((res) => {
        console.log('收到服务器内容：', res.data);
        this.message += res.data + '\n';
      });

      this.ws.onError((err) => {
        console.error('WebSocket错误：', err);
      });

      this.ws.onClose((res) => {
        console.log('WebSocket 已关闭！', res);
        this.socketOpen = false;
      });
    },
    sendMessage() {
      if (this.socketOpen && this.inputMessage) {
        this.ws.send({
          data: this.inputMessage,
        });
        this.inputMessage = '';
      } else {
        uni.showToast({
          title: 'WebSocket未连接或消息为空',
          icon: 'none',
        });
      }
    },
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  },
};
</script>

2. WebSocket服务器

请注意，上述代码示例假设你有一个WebSocket服务器在运行。你可以使用Node.js、Python、Java等语言搭建WebSocket服务器。以下是一个简单的Node.js WebSocket服务器示例：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('New client connected');

  ws.on('message', (message) => {
    console.log(`Received: ${message}`);
    // 广播消息给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

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

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

这个简单的示例展示了如何在uni-app中配置WebSocket，并实现基本的即时通讯功能。根据实际需求，你可能需要进一步完善功能，如用户认证、消息存储等。