ჩეთის real-time აპლიკაცია შესანიშნავი მაგალითია იმისა, თუ როგორ უნდა გამოიყენოთ WebSocket მომხმარებლის Node.js ინტერაქტიული და მიმზიდველი გამოცდილების შესაქმნელად. ამ სტატიაში ჩვენ განვიხილავთ, თუ როგორ უნდა ავაშენოთ real-time ჩატის აპლიკაცია WebSocket და Node.js.
ნაბიჯი 1: გარემოს დაყენება
პირველ რიგში, დარწმუნდით, რომ დააინსტალირეთ Node.js თქვენს კომპიუტერში. შექმენით ახალი საქაღალდე თქვენი პროექტისთვის და გადადით მასში Terminal ან Command Prompt.
ნაბიჯი 2: WebSocket ბიბლიოთეკის ინსტალაცია
როგორც ადრე, გამოიყენეთ "ws" ბიბლიოთეკა ბიბლიოთეკის დასაყენებლად WebSocket:
npm install ws
ნაბიჯი 3: WebSocket სერვერის შექმნა
შექმენით ფაილი სახელად server.js
და ჩაწერეთ შემდეგი კოდი:
// Import the WebSocket library
const WebSocket = require('ws');
// Create a WebSocket server
const server = new WebSocket.Server({ port: 8080 });
// List of connections(clients)
const clients = new Set();
// Handle new connections
server.on('connection',(socket) => {
console.log('Client connected.');
// Add connection to the list
clients.add(socket);
// Handle incoming messages from the client
socket.on('message',(message) => {
// Send the message to all other connections
for(const client of clients) {
if(client !== socket) {
client.send(message);
}
}
});
// Handle connection close
socket.on('close',() => {
console.log('Client disconnected.');
// Remove the connection from the list
clients.delete(socket);
});
});
ნაბიჯი 4: მომხმარებლის ინტერფეისის შექმნა(კლიენტი)
შექმენით ფაილი სახელად index.html
და ჩაწერეთ შემდეგი კოდი:
<!DOCTYPE html>
<html>
<head>
<title>Real-Time Chat</title>
</head>
<body>
<input type="text" id="message" placeholder="Type a message">
<button onclick="send()">Send</button>
<div id="chat"></div>
<script>
const socket = new WebSocket('ws://localhost:8080');
socket.onmessage =(event) => {
const chat = document.getElementById('chat');
chat.innerHTML += '<p>' + event.data + '</p>';
};
function send() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
ნაბიჯი 5: სერვერის გაშვება და ბრაუზერის გახსნა
ში Terminal, სერვერის დასაწყებად გაუშვით შემდეგი ბრძანება WebSocket:
node server.js
გახსენით ვებ ბრაუზერი და გადადით " http://localhost:8080 " ჩეთის აპლიკაციის გამოსაყენებლად real-time.
დასკვნა
გილოცავ! თქვენ წარმატებით შექმენით real-time ჩატის აპლიკაცია WebSocket და Node.js. ეს აპლიკაცია მომხმარებლებს საშუალებას აძლევს ურთიერთქმედონ და გაგზავნონ/მიიღონ შეტყობინებები ში real-time. თქვენ შეგიძლიათ გააგრძელოთ ამ აპლიკაციის გაფართოება და მორგება სხვადასხვა საინტერესო ფუნქციების შესაქმნელად!