I'm using socket.io for implementing a chat service for the project LangB.
Here in part 1, I'm building global chat.
nest new socket-backend
Then, go to socket-backend
yarn add @nestjs/websockets
yarn add @nestjs/platform-socket.io
yarn add -D @types/socket.io
socket-backend/src/chat.gateway.ts
import { MessageBody, SubscribeMessage, WebSocketGateway, WebSocketServer } from "@nestjs/websockets";
@WebSocketGateway()
export class ChatGateway {
@WebSocketServer()
server;
@SubscribeMessage('message')
handleMessage(@MessageBody() message: string): void {
this.server.emit('message', message);
}
}socket-client/index.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div>
<ul id="messages"></ul>
</div>
<div>
<input id="message" type="text" />
<button onclick="handleSubmitNewMessage()">Submit</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<script src="./chat-socket.js"></script>
</body>
</html>socket-client/chat-socket.js
const socket = io("http://localhost:3000");
const message = document.getElementById("message");
const messages = document.getElementById("messages");
const handleSubmitNewMessage = () => {
socket.emit("message", { data: message.value });
};
socket.on("message", ({ data }) => {
handleNewMessage(data);
});
const handleNewMessage = (message) => {
messages.appendChild(buildNewMessage(message));
};
const buildNewMessage = (message) => {
const li = document.createElement("div");
li.appendChild(document.createTextNode(message));
return li;
};After doing so, yarn start:dev in socket-backend, and open the html file with live server.
Tada !!
두비두밥밥