Czat online to bardzo popularna aplikacja, która pozwala kilku osobom rozmawiać przez internet w czasie rzeczywistym. Ten poradnik pokazuje, jak zbudować czat online w JavaScripcie, korzystając z API WebSockets i dokładając CSS oraz HTML, żeby dopracować interfejs użytkownika.
Zanim zaczniesz, zainstaluj NodeJS na swoim komputerze
Node.js jest do tego poradnika niezbędny, bo to środowisko uruchomieniowe JavaScriptu, które pozwala wykonywać kod JavaScript po stronie serwera. W naszym poradniku o budowie czatu online w JavaScripcie korzystamy z API WebSockets, dostępnego wyłącznie po stronie serwera. Node.js pozwala nam więc postawić serwer WebSocket i obsłużyć połączenia oraz komunikację w czasie rzeczywistym między klientami.
Zanim przejdziesz dalej, trzeba zatem zainstalować Node.js na komputerze. Instalator pobierzesz z oficjalnej strony (https://nodejs.org/) i zainstalujesz, wykonując instrukcje z ekranu. Po instalacji powinieneś móc uruchamiać kod JavaScript po stronie serwera poleceniem „node” w terminalu.
Instalacja pakietu ws przez NPM
Zainstaluj moduł „ws” przez npm (Node Package Manager). Otwórz terminal i wpisz następujące polecenie:
npm install wsCzat w JavaScripcie
Czat online to bardzo popularna aplikacja, która pozwala kilku osobom rozmawiać przez internet w czasie rzeczywistym. Ten poradnik pokazuje, jak zbudować czat online w JavaScripcie, korzystając z API WebSockets i dokładając CSS oraz HTML, żeby dopracować interfejs użytkownika.
Kod HTML
Utwórz stronę HTML z formularzem do wpisywania wiadomości i elementem, w którym będą się one wyświetlać. Możesz użyć poniższego kodu:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat en ligne</title>
<link rel="stylesheet" href="http://style.css">
</head>
<body>
<div id="chat">
<div id="messages">
<!-- Les messages seront affichés ici -->
</div>
<form id="formulaire">
<input type="text" id="message" placeholder="Entrez votre message ici">
<button type="submit">Envoyer</button>
</form>
</div>
</body>
</html>Kod CSS
Dodaj CSS, żeby dopracować interfejs swojego czatu online. Za podstawę możesz wziąć poniższy kod:
style.css
#chat {
width: 500px;
margin: 0 auto;
font-family: sans-serif;
}
#messages {
border: 1px solid #ccc;
height: 300px;
overflow-y: scroll;
padding: 10px;
}
#formulaire {
padding: 10px;
text-align: center;
}
#formulaire input[type="text"] {
border: 1px solid #ccc;
border-radius: 3px;
padding: 8px;
width: 80%;
}
#formulaire button[type="submit"] {
border: none;
border-radius: 3px;
padding: 8px;
background-color: #4caf50;
color: #fff;
}Kod JavaScript po stronie serwera
Postaw serwer WebSocket na Node.js i module „ws”. Dla serwera możesz użyć poniższego kodu:
server.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});
ws.send('Bienvenue sur le chat Gekkode!');
});
console.log('Server started on port 9999');Żeby uruchomić serwer NodeJS, wpisz w konsoli poniższą linijkę, w katalogu z projektem i plikiem server.js
server.js
node server.jsJeśli się udało, powinieneś zobaczyć „Server started on port 9999”. Kodu po stronie serwera jeszcze nie skończyliśmy, wrócimy do niego i rozbudujemy go w dalszej części poradnika.
Na razie zajrzyjmy raczej na front.
Kod JavaScript po stronie frontu
Podłącz swoją stronę HTML do serwera WebSocket przez javascriptowy obiekt WebSocket. Na start możesz użyć poniższego kodu:
script.js
const socket = new WebSocket('ws://localhost:9999');
socket.onopen = function() {
console.log('Connecté au serveur WebSocket');
};
socket.onmessage = function(event) {
const message = document.createElement('div');
message.textContent = event.data;
document.getElementById('messages').appendChild(message);
};Wiadomości wpisane przez użytkownika wyślij na serwer WebSocket metodą „send” obiektu WebSocket. Na start możesz użyć poniższego kodu:
script.js
document.getElementById('formulaire').addEventListener('submit', function(event) {
event.preventDefault();
const message = document.getElementById('message').value;
socket.send(message);
document.getElementById('message').value = '';
});Jak rozesłać wiadomości czatu do połączonych użytkowników
Domyślnie wiadomości się nie pojawią, jeśli serwer Node.js nie odeśle ich do połączonych klientów.
Musimy wrócić do server.js i zmienić kilka linijek, żeby serwer Node.js rozsyłał wiadomości do połączonych klientów naszego czatu online w JavaScripcie:
script.js
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 9999 });
const clients = [];
wss.on('connection', function connection(ws) {
clients.push(ws);
ws.on('message', function incoming(message) {
console.log('received: %s', message);
broadcast(String(message));
});
ws.send('Bienvenue sur le chat Gekkode!');
});
function broadcast(message) {
clients.forEach(function(client) {
client.send(message);
});
}
console.log('Server started on port 9999');Możesz natknąć się na problem z typem danych, jeśli po stronie frontu zamiast wiadomości wysłanych przez użytkowników pojawia się „[object Blob]”.
Sprawdź, czy z serwera naprawdę wysyłasz tekst, a nie obiekty Blob. Upewnij się, że metoda „send” obiektu WebSocket dostaje jako argument ciąg znaków:
ws.send(String(message));
Masz teraz cały kod z samouczka: nie zapomnij uruchomić npm install, aby pobrać zależności, i wystartować serwer Node.js.
I to tyle: wiesz już, jak po stronie frontu odbierać i wyświetlać wiadomości w czacie online w JavaScripcie. Jeśli artykuł ci się spodobał, śledź blog w mediach społecznościowych.
