Memastikan komunikasi yang cekap dan lancar antara pelanggan dan pelayan adalah kunci apabila membina aplikasi web masa nyata moden. Permintaan HTTP tradisional—seperti yang digunakan dalam pengundian—adalah tanpa negara dan satu arah. Pelanggan membuat permintaan (cth., menggunakan fetch atau axios) kepada pelayan, dan pelayan bertindak balas sebelum sambungan ditutup. Jika pelanggan memerlukan data baharu, ia mesti menghantar permintaan baharu berulang kali pada selang masa yang tetap, mewujudkan kependaman yang tidak perlu dan meningkatkan beban pada kedua-dua pelanggan dan pelayan.
Sebagai contoh, jika anda sedang membina apl sembang langsung atau penjejak harga saham, tinjauan pendapat memerlukan pelanggan meminta kemas kini setiap saat atau lebih, walaupun tiada data baharu untuk diambil. Di sinilah WebSockets bersinar.
WebSockets menyediakan saluran komunikasi dua hala yang berterusan antara pelanggan dan pelayan. Setelah sambungan diwujudkan, pelayan boleh serta-merta menolak kemas kini kepada klien tanpa menunggu permintaan baharu. Ini menjadikan WebSockets sesuai untuk senario di mana kemas kini masa nyata adalah penting, seperti:
Menggunakan JavaScript Vanila pada bahagian klien dan masa jalan Bun di bahagian pelayan menjadikan pelaksanaan WebSockets mudah dan cekap. Contohnya:
Dalam senario ini, WebSockets menawarkan kependaman yang lebih rendah, beban pelayan yang dikurangkan dan pengalaman pengguna yang lebih lancar daripada kaedah pengundian tradisional.
Pertama, pastikan Bun dipasang. Kemudian buat projek Bun baharu, buat direktori kosong baharu, masukkan ke dalam direktori baharu dan mulakan projek melalui arahan bun init:
mkdir websocket-demo cd websocket-demo bun init
Arahan bun init akan mencipta fail package.json, fail index.ts "hello world", fail .gitignore, fail tsconfig.json untuk konfigurasi skrip taip dan fail README.md.
Sekarang, anda boleh mula membuat kod JavaScript anda. Saya akan menunjukkan kepada anda keseluruhan skrip; maka kita akan meneroka semua bahagian yang berkaitan. Anda boleh mengedit fail index.ts:
console.log("? Hello via Bun! ?"); const server = Bun.serve({ port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000 fetch(req, server) { const url = new URL(req.url); if (url.pathname === "/") return new Response(Bun.file("./index.html")); if (url.pathname === "/surprise") return new Response("?"); if (url.pathname === "/chat") { if (server.upgrade(req)) { return; // do not return a Response } return new Response("Upgrade failed", { status: 400 }); } return new Response("404!"); }, websocket: { message(ws, message) { console.log("✉️ A new Websocket Message is received: " + message); ws.send("✉️ I received a message from you: " + message); }, // a message is received open(ws) { console.log("? A new Websocket Connection"); ws.send("? Welcome baby"); }, // a socket is opened close(ws, code, message) { console.log("⏹️ A Websocket Connection is CLOSED"); }, // a socket is closed drain(ws) { console.log("DRAIN EVENT"); }, // the socket is ready to receive more data }, }); console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);
Di bawah ialah pecahan kod yang disediakan, menerangkan setiap bahagian dan fungsinya.
mkdir websocket-demo cd websocket-demo bun init
Kaedah Bun.serve memulakan pelayan yang mampu mengendalikan kedua-dua permintaan HTTP dan WebSocket.
console.log("? Hello via Bun! ?"); const server = Bun.serve({ port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000 fetch(req, server) { const url = new URL(req.url); if (url.pathname === "/") return new Response(Bun.file("./index.html")); if (url.pathname === "/surprise") return new Response("?"); if (url.pathname === "/chat") { if (server.upgrade(req)) { return; // do not return a Response } return new Response("Upgrade failed", { status: 400 }); } return new Response("404!"); }, websocket: { message(ws, message) { console.log("✉️ A new Websocket Message is received: " + message); ws.send("✉️ I received a message from you: " + message); }, // a message is received open(ws) { console.log("? A new Websocket Connection"); ws.send("? Welcome baby"); }, // a socket is opened close(ws, code, message) { console.log("⏹️ A Websocket Connection is CLOSED"); }, // a socket is closed drain(ws) { console.log("DRAIN EVENT"); }, // the socket is ready to receive more data }, }); console.log(`? Server (HTTP and WebSocket) is launched ${server.url.origin}`);
Kunci websocket mentakrifkan pengendali acara untuk mengurus sambungan WebSocket.
const server = Bun.serve({ port: 8080, // defaults to $BUN_PORT, $PORT, $NODE_PORT otherwise 3000 ... });
Dicetuskan apabila pelanggan mewujudkan sambungan WebSocket.
fetch(req, server) { const url = new URL(req.url); if (url.pathname === "/") return new Response(Bun.file("./index.html")); if (url.pathname === "/surprise") return new Response("?"); if (url.pathname === "/chat") { if (server.upgrade(req)) { return; // do not return a Response } return new Response("Upgrade failed", { status: 400 }); } return new Response("404!"); }
Dicetuskan apabila pelayan menerima mesej daripada pelanggan.
open(ws) { console.log("? A new Websocket Connection"); ws.send("? Welcome baby"); }
Dicetuskan apabila sambungan WebSocket ditutup.
Parameter:
message(ws, message) { console.log("✉️ A new Websocket Message is received: " + message); ws.send("✉️ I received a message from you: " + message); }
Peristiwa longkang dicetuskan apabila WebSocket bersedia untuk menerima lebih banyak data selepas ditimpa buat sementara waktu.
close(ws, code, message) { console.log("⏹️ A Websocket Connection is CLOSED"); }
Melog URL pelayan ke konsol sebaik sahaja ia dijalankan.
Sebaik sahaja anda mempunyai fail index.ts anda, anda boleh memulakan pelayan melalui bun run:
drain(ws) { console.log("DRAIN EVENT"); }
Pelayan sudah sedia dan berfungsi. Kini, kami boleh melaksanakan pelanggan.
Kini kami memahami struktur skrip untuk mengendalikan WebSocket, langkah seterusnya ialah:
Atas ialah kandungan terperinci WebSocket dengan JavaScript dan Bun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!