WebSocket一个非常简单的示例---》简单易懂6

1.没有前言：只有兴趣直接上代码

！# 用node.js  服务端代码块1

const express = require('express'); // npm i express
const WebSocket = require('ws');  // npm i ws
const cors = require('cors'); // npm cors 
const app = express(); 
const port = 8090;

// 配置CORS
const corsOptions = {
    origin: '*', // 允许所有用户访问
    methods: ['GET', 'HEAD', 'PUT', 'POST', 'DELETE'],
    allowedHeaders: ['Origin', 'No-Cache', 'X-Requested-With', 'If-Modified-Since', 'Pragma', 'Last-Modified', 'Cache-Control', 'Expires', 'Content-Type', 'X-E4b-Metadata']
};

app.use(cors()); 挂载到express框架的中间件

// 创建HTTP服务器
const server = app.listen(port, () => {
    console.log(`服务器运行在http://localhost:${port}`);
});

// 提供静态文件
app.use(express.static('public'));

// 创建WebSocket服务器
const wss = new WebSocket.Server({
    server,
    // 允许跨域连接
    origin: ['http://localhost:8090'],
    verifyClient: (info, done) => {
        done(true); // 允许所有请求
    }
});

// 存储所有连接的客户端
const clients = new Set();

// 定期向所有客户端发送时间
// setInterval(() => {
//     const currentTime = new Date().toLocaleTimeString();
//     const message = `服务器时间：${currentTime}`;
//     clients.forEach(client => {
//         if (client.readyState === WebSocket.OPEN) {
//             client.send(message);
//         }
//     });
// }, 5000);

wss.on('connection', (ws) => {
    clients.add(ws);
    console.log('新客户端连接');

    // 当客户端连接时，发送欢迎消息
    ws.send('欢迎连接到WebSocket服务器！');  //ws.send() 服务端发送消息用的

    ws.on('message', (message) => {
        console.log('接收到消息:', message.toString());
        //这里自己实现，接受到连接用户的消息后，想回应的消息
        ws.send(
            message.toString() 
          
        )
        // 将消息广播给所有客户端
        const broadcastMessage = `客户端发送：${message.toString()}`;
        clients.forEach(client => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(broadcastMessage);
            }
        });
    });

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

Vue代码，也可以用DeepSeek 实现基本的JS方式的客户端demo

!# vue 前端基本框架，自己完善。。。。。。我就是不完善   这个代码块我是放在App.vue里面，因为这是个demo,自己看情况

<template>
  <div class="chat-container">
    <h1>WebSocket聊天室</h1>
    <div class="messages" v-for="(message, index) in messages" :key="index">
      <div class="message" :class="{ received: message.type === 'received', sent: message.type === 'sent' }">
        <div class="content">{{ message.text }}</div>
        <div class="timestamp">{{ message.timestamp }}</div>
      </div>
    </div>
    <div class="message-form">
      <input v-model="newMessage" type="text" placeholder="输入消息...">
      <button @click="sendMessage">发送</button>
    </div>
    <div class="status">{{ status }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      newMessage: '',
      messages: [],
      status: '连接中...'
    }
  },
  mounted() {
    this.initWebSocket()
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close()
    }
  },
  methods: {
    initWebSocket() {
      const wsUri = 'ws://localhost:8090'
      this.ws = new WebSocket(wsUri)

      this.ws.onopen = () => {
        this.status = '连接成功'
      }

      this.ws.onmessage = (event) => {
        const message = {
          text: event.data,
          timestamp: new Date().toLocaleTimeString(),
          type: 'received'
        }
        this.messages.push(message)
      }

      this.ws.onclose = () => {
        this.status = '断开连接，正在重连...'
        setTimeout(() => {
          this.initWebSocket()
        }, 5000)
      }    //短轮询 断连后，监听是否有用户连接

      this.ws.onerror = (error) => {
        console.error('WebSocket错误:', error)
        this.status = '连接错误，请检查服务器是否运行'
      }
    },
    sendMessage() {
      if (this.ws && this.ws.readyState === WebSocket.OPEN) {
        const message = this.newMessage.trim()
        if (message) {
          this.ws.send(message)

          // 添加发送的消息到本地显示
          const sentMessage = {
            text: message,
            timestamp: new Date().toLocaleTimeString(),
            type: 'sent'
          }
          this.messages.push(sentMessage)

          this.newMessage = ''
        }
      } else {
        alert('未连接到服务器，请稍后重试')
      }
    }
  }
}
</script>

<style>
.chat-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.messages {
  height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.message {
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  max-width: 70%;
}

.received {
  background-color: #fff;
  margin-left: 20%;
}

.sent {
  background-color: #e3f2fd;
  margin-right: 20%;
  text-align: right;
}

.timestamp {
  font-size: 0.8em;
  color: #666;
  margin-top: 5px;
}

.message-form {
  display: flex;
  gap: 10px;
}

input[type="text"] {
  flex-grow: 1;
  padding: 8px;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.status {
  margin-top: 10px;
  text-align: center;
  color: #666;
}
</style>

最后