websocket

刘春龙原创...小于 1 分钟

创建socket网关

nest g ga ./gateway/websocket

安装

npm install @nestjs/websockets @nestjs/platform-socket.io

配置

import { ConnectedSocket, MessageBody, SubscribeMessage, WebSocketGateway, WebSocketServer } from '@nestjs/websockets';
import { Socket } from 'socket.io';

@WebSocketGateway(4000, { cors: { origin: '*' } })
export class WebScoketApp {
  // @WebSocketServer() server: Server;

  handleConnection(client: any, ...args: any[]) {
    console.log('Client connected');
  }

  handleDisconnect(client: any) {
    console.log('Client disconnected');
  }

  // 订阅（接收客户端的数据）
  @SubscribeMessage('newMessage')
  handleMessage(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
    console.log(body);
    if (body) {
      setInterval(() => {
        this.handleMessage1(body, client)
      }, 2000)
    }
  }
  // 发布（给客户端传递数据）
  handleMessage1(@MessageBody() body: any, @ConnectedSocket() client: Socket) {
    client.emit('message', body)
  }
}

注入

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { WebScoketApp } from './gateway/websocket/websocket.gateway';

@Module({
  imports: [],
  controllers: [AppController],
  providers: [AppService, WebScoketApp],
})
export class AppModule { }

前端去使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
</head>

<body>
    <h1>WebSocket Chat</h1>
    <div id="chat-box"></div>
    <input type="text" id="message-input" placeholder="Type a message...">
    <button id="send-button">Send</button>
    <script type="module">
        import { io } from "https://cdn.socket.io/4.4.1/socket.io.esm.min.js";
        const socketClient = io('http://localhost:4000');

        socketClient.on('connect', () => {
            console.log('WebSocket connected:', event);
        })
        socketClient.on('disconnect', (event) => {
            console.log('WebSocket closed:', event);
        })
        socketClient.on('error', (event) => {
            console.log('WebSocket error:', event)
        })
        // 接收服务端的数据
        socketClient.on('message', (event) => {
            console.log('WebSocket message:', event)
        })
        // 给服务端发送数据
        document.getElementById('send-button').addEventListener('click', () => {
            const messageInput = document.getElementById('message-input');
            const message = messageInput.value;
            socketClient.emit('newMessage', message);
            messageInput.value = '';
        });
    </script>
</body>

</html>

昵称

邮箱

网址

按正序
按倒序
按热度

websocket

预览: