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>
Powered by Waline v2.15.7