小程序连接socket,不是websocket【已解决】uniapp版本+微信原生版本

uniapp微信小程序连接socket,不是websocket【已解决】uniapp版本+微信原生版本

uniapp微信小程序连接socket,不是websocket【已解决】uniapp版本+微信原生版本

原因：微信原生小程序不支持，要通过socket.io官方npm包解决。已测试

已测试：uniapp[开发的微信小程序]+原生微信小程序
未测试：h5

npm install weapp.socket.io@3.0.0

根目录：/utils/socket.js（自己创建）

// utils/socket.js
import io from 'weapp.socket.io';

let socket;

export function connectSocket(url) {
  socket = io(url);

  socket.on('connect', () => {
    console.log('connected');
  });

  socket.on('disconnect', () => {
    console.log('disconnected');
  });

  return socket;
}

export function getSocket() {
  return socket;
}

pages/index/index.vue

<!-- pages/index/index.vue -->
<template>
  <view>
    <button @click="sendMessage">Send Message</button>
    <view v-for="(msg, index) in messages" :key="index">{{ msg }}</view>
  </view>
</template>

<script>
import { connectSocket, getSocket } from '@/utils/socket.js';

export default {
  data() {
    return {
      messages: [],
      socketConnected: false
    };
  },
  created() {
    // 连接到 Socket.IO 服务器
    this.socket = connectSocket('http://your-server-url');
    
    // 监听连接成功事件
    this.socket.on('connect', () => {
      console.log('connected');
      this.socketConnected = true;
    });

    // 监听接收到消息事件
    this.socket.on('message', (data) => {
      console.log('message:', data);
      this.messages.push(data);
    });

    // 监听断开连接事件
    this.socket.on('disconnect', () => {
      console.log('disconnected');
      this.socketConnected = false;
    });
  },
  beforeDestroy() {
    // 组件销毁时关闭 Socket.IO 连接
    if (this.socket) {
      this.socket.close();
    }
  },
  methods: {
    sendMessage() {
      if (this.socketConnected) {
        this.socket.emit('message', 'Hello, server!');
      }
    }
  }
};
</script>

<style scoped>
/* 添加你的样式 */
</style>