Vue3组合式API应用中socket.io-client Web连接测试问题

核心问题：连接目标不支持Socket.io #

你尝试连接的https://www.google.com并没有运行Socket.io服务端，Socket.io要求客户端和服务端必须基于Socket.io协议通信，普通HTTP/HTTPS网站不具备这个能力，这是连接失败的根本原因。

测试方案调整 #

使用官方提供的Socket.io测试服务器验证连接，地址为https://demo.socket.io，该服务器专门用于Socket.io客户端的连接测试。

修正后的代码实现 #

1. 更新Socket.ts文件 #

import { reactive } from 'vue'
import { io } from 'socket.io-client'

export const state = reactive({
  connected: false
})

// 替换为官方测试服务器地址，指定websocket传输方式
export const socket = io('https://demo.socket.io', {
  transports: ['websocket']
})

socket.on('connect', () => {
  state.connected = true
  console.log('Socket连接成功')
})

socket.on('disconnect', () => {
  state.connected = false
  console.log('Socket连接断开')
})

// 监听连接错误，方便排查问题
socket.on('connect_error', (error) => {
  console.error('连接失败:', error)
})

2. 修复组件代码 #

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { state, socket } from '../Socket'

const connected = computed(() => state.connected)

onMounted(() => {
  console.log('组件已挂载，当前Socket状态:', state.connected)
  // 无需手动调用socket.connect()，io初始化时已自动发起连接
})
</script>
<template>
  <p>Socket连接状态：{{ connected }}</p>
</template>

额外提示 #

• Socket.io客户端初始化后会自动尝试连接，只有在手动断开过连接的情况下，才需要调用socket.connect()重新连接
• 新增的connect_error事件监听可以帮你快速定位连接失败的具体原因
• 若需要自定义测试服务端，可通过Node.js快速搭建：

// server.js
const { Server } = require('socket.io')
const io = new Server(3000, {
  cors: { origin: "*" } // 开发环境允许跨域，生产环境需指定具体域名
})

io.on('connection', (socket) => {
  console.log('客户端已连接')
  socket.on('disconnect', () => {
    console.log('客户端已断开')
  })
})

启动服务后，客户端连接地址改为http://localhost:3000即可。

内容的提问来源于stack exchange，提问作者tsiPlus