WebSockets untuk Aliran Dua Arah
Terapkan dan pahami WebSockets, protokol komunikasi dupleks penuh yang ideal untuk pertukaran data dua arah secara waktu nyata antara klien dan server.
WebSockets untuk Aliran Dua Arah adalah pelajaran Real-Time Streaming Systems (WebRTC + Live Data) gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Real-Time Streaming Systems (WebRTC + Live Data), dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.
What are WebSockets?
Imagine a phone call where both people can talk and listen at the same time, without hanging up and redialing for each sentence. That's similar to a WebSocket connection!
WebSockets provide a full-duplex communication channel over a single, long-lived connection. This means data can flow in both directions simultaneously, making real-time interactions smooth and efficient.
Beyond HTTP: Bidirectional Flow
Traditional HTTP communication works like sending a letter and waiting for a reply. Each request is separate.
- HTTP: Client sends a request, server sends a response. Connection usually closes.
- WebSockets: Once connected, client and server can send messages to each other at any time, without needing a new request/response cycle. The connection stays open.
This persistent, bidirectional nature is crucial for live updates.
Establishing a WebSocket
A WebSocket connection starts with a standard HTTP request, but it includes a special header to 'upgrade' the connection.
This process is called the WebSocket Handshake:
- Client sends an HTTP request with an 'Upgrade' header.
- Server responds with a '101 Switching Protocols' status.
- The connection then becomes a persistent WebSocket connection.
After the handshake, the underlying TCP connection is used for direct WebSocket message exchange.
Your Browser's WebSocket API
In web browsers, you interact with WebSockets using the built-in WebSocket API. It's a JavaScript object that handles the connection details for you.
You create a new WebSocket instance by providing the URL of your WebSocket server. This URL typically starts with ws:// for unencrypted or wss:// for encrypted connections (secure WebSockets).
Connecting to a Server
Let's see how to establish a basic WebSocket connection from your browser. We'll connect to a public echo server that simply sends back whatever it receives.
Try running this example. You should see 'Connected!' when the connection is established.
<!DOCTYPE html>
<html>
<head>
<title>WebSocket Connect</title>
</head>
<body>
<h1>Connecting...</h1>
<script>
// Use wss:// for secure connections
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.querySelector('h1').innerText = 'Connected!';
console.log('WebSocket connection opened');
};
socket.onerror = (error) => {
document.querySelector('h1').innerText = 'Error!';
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>Sending Data to the Server
Once connected, you can send data to the WebSocket server using the send() method of your WebSocket object. You can send text, binary data, or even JSON strings.
In this example, type a message and click 'Send'. The echo server will receive it.
<!DOCTYPE html>
<html>
<head>
<title>Send WebSocket</title>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type a message">
<button onclick="sendMessage()">Send</button>
<p id="status"></p>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
document.getElementById('status').innerText = 'Connected. Send a message!';
};
function sendMessage() {
const input = document.getElementById('messageInput');
const message = input.value;
if (socket.readyState === WebSocket.OPEN) {
socket.send(message);
document.getElementById('status').innerText = 'Sent: ' + message;
input.value = ''; // Clear input after sending
} else {
document.getElementById('status').innerText = 'Not connected yet!';
}
}
</script>
</body>
</html>Receiving Server Updates
To receive messages from the server, you listen for the message event using socket.onmessage. The event object contains the received data.
Run this code. It sends a message on open, and then displays the echo server's response.
<!DOCTYPE html>
<html>
<head>
<title>Receive WebSocket</title>
</head>
<body>
<h1>Echo Messages</h1>
<ul id="messages"></ul>
<script>
const socket = new WebSocket('wss://echo.websocket.events');
socket.onopen = () => {
console.log('WebSocket connection opened.');
// Send a message to get a response from the echo server
socket.send('Hello Echo Server!');
};
socket.onmessage = (event) => {
const messageList = document.getElementById('messages');
const newItem = document.createElement('li');
newItem.textContent = 'Received: ' + event.data;
messageList.appendChild(newItem);
};
socket.onerror = (error) => {
console.error('WebSocket Error:', error);
};
</script>
</body>
</html>Closing WebSockets Gracefully
It's good practice to manage your WebSocket connections. You can close a connection using the socket.close() method.
Additionally, you can listen for other events:
socket.onclose: Fired when the connection is closed.socket.onerror: Fired if an error occurs during connection.
Properly handling these events helps build robust real-time applications.
Where WebSockets Shine
WebSockets are perfect for applications that need instant, continuous updates between clients and servers. Common use cases include:
- Real-time chat applications: Messages appear instantly for all participants.
- Live sports scores/stock tickers: Data updates without page refreshes.
- Multiplayer online games: Synchronizing game state and player actions.
- Collaborative editing: Seeing changes from others in real-time.
They provide a more efficient alternative to repeatedly polling a server.
WebSocket Knowledge Check
You've learned about WebSockets. Let's test your understanding!
WebSockets Summary
Great job! In this lesson, you explored WebSockets, a powerful technology for real-time communication.
- WebSockets provide full-duplex, bidirectional communication.
- They establish a persistent connection after an HTTP handshake.
- The browser's
WebSocketAPI allows you to connect, send, and receive messages. - WebSockets are ideal for applications needing instant, continuous updates.
Next, you'll delve into practical applications of data channels in WebRTC!
Pertanyaan yang Sering Diajukan
Apakah pelajaran “WebSockets untuk Aliran Dua Arah” gratis?
Ya — teks lengkap “WebSockets untuk Aliran Dua Arah” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Real-Time Streaming Systems (WebRTC + Live Data), upgrade ke CoddyKit PRO. Kursus Real-Time Streaming Systems (WebRTC + Live Data) mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “WebSockets untuk Aliran Dua Arah”?
Terapkan dan pahami WebSockets, protokol komunikasi dupleks penuh yang ideal untuk pertukaran data dua arah secara waktu nyata antara klien dan server. Kamu berlatih Real-Time Streaming Systems (WebRTC + Live Data) dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Real-Time Streaming Systems (WebRTC + Live Data)?
Tidak diperlukan pengalaman sebelumnya. Real-Time Streaming Systems (WebRTC + Live Data) di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.
Berapa lama pelajaran “WebSockets untuk Aliran Dua Arah” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Real-Time Streaming Systems (WebRTC + Live Data) ini?
Ya. Setiap pelajaran Real-Time Streaming Systems (WebRTC + Live Data) menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Data Langsung vs. HTTP Tradisional
- WebSockets untuk Aliran Dua Arah
- Server-Sent Events (SSE) untuk Dorongan Satu Arah
- Long Polling dan Evolusinya Menuju Streaming