WebSocket 前端node启用ws调试

server.js

复制代码

<!-- WebSocket 实时通信 -->
<!-- 2 npm install ws -->
 <!-- 3 npm list ws  看安装上没-->
<!-- 本地起websocket 创建 WebSocket 服务器文件 server.js -->
 <!-- 4 4️⃣ 启动服务器 node server.js -->
<template>
  <div class="websocket-chat">
    <div class="chat" style="border: 1px solid #ccc; padding: 10px; height: 200px; overflow-y: auto;">
      <p v-for="(msg, index) in messages" :key="index">{{ msg }}</p>
    </div>
    <input
      type="text"
      v-model="messageInput"
      placeholder="Type your message"
      @keyup.enter="sendMessage"
      style="margin-top: 10px; padding: 5px;"
    />
    <button @click="sendMessage" style="margin-left: 5px; padding: 5px 10px;">Send</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'

const messages = ref<string[]>([])
const messageInput = ref('')
let socket: WebSocket | null = null
const isConnected = ref(false) // 标识连接状态

onMounted(() => {
  try {
    socket = new WebSocket('ws://localhost:8888')
    // 带token
    // socket = new WebSocket(`wss://api.example.com/ws?token=${userToken}`)

    socket.onopen = (event) => {
      console.log('WebSocket connection opened:', event)
      isConnected.value = true
      messages.value.push('✅ 已连接 WebSocket 服务器')
    }

    socket.onmessage = (event) => {
        //   messages.value.push(`${data.userName}: ${data.content}`)
      messages.value.push('收到: ' + event.data)
    }

    socket.onclose = (event) => {
      console.log('WebSocket connection closed:', event)
      isConnected.value = false
      messages.value.push('❌ WebSocket 已关闭')
    }

    socket.onerror = (event) => {
      console.error('WebSocket error:', event)
      isConnected.value = false
      messages.value.push('⚠️ WebSocket 出错或未连接')
    }
  } catch (error) {
    console.error('WebSocket 初始化失败:', error)
    messages.value.push('⚠️ WebSocket 初始化失败')
  }
})

onBeforeUnmount(() => {
  socket?.close()
})

const sendMessage = () => {
  if (!isConnected.value) {
    messages.value.push('⚠️ 发送失败，WebSocket 未连接')
    return
  }
  if (socket && socket.readyState === WebSocket.OPEN && messageInput.value.trim() !== '') {
/*     socket.send(JSON.stringify({
  type: 'chat',
  content: messageInput.value,
  userId: currentUserId
})) */
    socket.send(messageInput.value)
    messages.value.push('发送: ' + messageInput.value)
    messageInput.value = ''
  }
}
</script>

<style scoped>
.websocket-chat input {
  width: 300px;
}
</style>

server.js文件

复制代码

server.js
// server.js (ES Module)
import { WebSocketServer } from 'ws'

// 创建 WebSocket 服务器，监听 8888
const wss = new WebSocketServer({ port: 8888 }, () => {
  console.log('WebSocket 服务器已启动，端口 8888')
})

wss.on('connection', (ws) => {
  console.log('客户端已连接')
  ws.send('欢迎连接本地 WebSocket 服务器!')

  ws.on('message', (message) => {
    console.log('收到客户端消息:', message)

    // 广播给所有客户端
    wss.clients.forEach((client) => {
      if (client.readyState === ws.OPEN) {
        client.send(`广播: ${message}`)
      }
    })
  })

  ws.on('close', () => {
    console.log('客户端断开连接')
  })

  ws.on('error', (err) => {
    console.error('WebSocket 错误:', err)
  })
})