WebSocket 前端node启用ws调试

server.js

<!-- WebSocket 实时通信 -->

<!-- 2 npm install ws -->

 <!-- 3 npm list ws  看安装上没-->

<!-- 本地起websocket 创建 WebSocket 服务器文件 server.js -->

 <!-- 4 4️⃣ 启动服务器 node 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><inputtype="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 = truemessages.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 = falsemessages.value.push('❌ WebSocket 已关闭')}socket.onerror = (event) => {console.error('WebSocket error:', event)isConnected.value = falsemessages.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)})
})