Rumah > hujung hadapan web > tutorial js > Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

WBOY
Lepaskan: 2023-12-17 12:09:28
asal
1471 orang telah melayarinya

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata

Pengenalan:
Dengan populariti Internet dan kemajuan teknologi, semakin banyak restoran telah mula menyediakan perkhidmatan pesanan dalam talian. Untuk melaksanakan sistem pesanan dalam talian masa nyata, kami boleh menggunakan teknologi JavaScript dan WebSocket. WebSocket ialah protokol komunikasi dupleks penuh berdasarkan protokol TCP, yang boleh merealisasikan komunikasi dua hala masa nyata antara pelanggan dan pelayan. Dalam sistem pesanan dalam talian masa nyata, apabila pengguna memilih hidangan dan membuat pesanan, pelayan boleh menolak maklumat pesanan ke dapur dalam masa nyata, dan selepas dapur menyediakan makanan, ia juga boleh memberitahu pengguna dalam masa nyata bahawa makanan sudah siap. Berikut akan memperkenalkan secara terperinci cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata, dan memberikan contoh kod khusus.

1. Penyediaan
Pertama, kita perlu menyediakan bahagian berikut:

  1. Halaman hadapan: Pengguna boleh memilih hidangan dan menghantar pesanan di halaman ini.
  2. Pelayan: Menerima maklumat pesanan pengguna dan menolaknya kepada tukang masak dan pengguna dalam masa nyata.
  3. Halaman dapur: Terima dan paparkan maklumat pesanan pengguna, dan maklumkan pengguna bahawa hidangan sudah siap dalam masa nyata.

2. Halaman hadapan

  1. Memperkenalkan perpustakaan JavaScript WebSocket
    Di halaman hujung hadapan, kami perlu memperkenalkan perpustakaan JavaScript WebSocket terlebih dahulu. Tambahkan kod berikut dalam teg HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
Salin selepas log masuk
  1. Mewujudkan sambungan WebSocket
    Di halaman hujung hadapan, kita perlu mewujudkan sambungan WebSocket dengan pelayan. Dalam JavaScript, anda boleh menggunakan kod berikut:
const socket = io('http://localhost:3000'); // 替换成实际的服务端地址
Salin selepas log masuk
  1. Dengar mesej yang ditolak oleh pelayan
    Apabila mesej baharu ditolak dari pelayan, halaman hadapan perlu diproses dengan sewajarnya. Dalam JavaScript, anda boleh menggunakan kod berikut:
socket.on('newOrder', order => {
  // 处理新的订单信息
});
Salin selepas log masuk
  1. Hantar pesanan
    Apabila pengguna memilih hidangan dan mengklik butang hantar pesanan, halaman hadapan perlu menghantar maklumat pesanan ke pelayan. Dalam JavaScript, anda boleh menggunakan kod berikut:
const order = {
  // 订单信息
};
socket.emit('submitOrder', order);
Salin selepas log masuk

3. Bahagian pelayan

  1. Pasang perpustakaan WebSocket
    Dalam persekitaran Node.js, kami boleh menggunakan perpustakaan socket.io untuk melaksanakan sambungan WebSocket. Jalankan arahan berikut pada baris arahan untuk memasang dependensi:
npm install socket.io
Salin selepas log masuk
  1. Wujudkan sambungan WebSocket
    Dalam kod pelayan, kita perlu mencipta pelayan WebSocket dan mendengar permintaan sambungan pelanggan. Dalam Node.js, anda boleh menggunakan kod berikut:
const io = require('socket.io')(http); // http为Node.js的HTTP服务器
io.on('connection', socket => {
  // 处理客户端的连接请求
});
Salin selepas log masuk
  1. Terima maklumat pesanan yang diserahkan oleh pelanggan
    Apabila pelanggan menyerahkan maklumat pesanan, pelayan perlu menerima dan memprosesnya. Dalam kod sisi pelayan, anda boleh menggunakan kod berikut:
socket.on('submitOrder', order => {
  // 处理订单信息
  // 推送订单信息给后厨和用户
  io.emit('newOrder', order);
});
Salin selepas log masuk
  1. Pemprosesan logik lain
    Mengikut keperluan sebenar, pelayan juga boleh melakukan pemprosesan logik lain, seperti penjejakan status pesanan, pengurusan inventori, dsb.

4. Halaman Belakang Dapur

  1. Halaman Hadapan
    Bahagian hadapan halaman Dapur Belakang adalah serupa dengan halaman hujung hadapan pengguna Ia perlu mewujudkan sambungan WebSocket dan memantau mesej yang ditolak oleh pelayan. Untuk kod tertentu, sila rujuk contoh kod pada halaman hujung hadapan pengguna.
  2. Paparkan maklumat pesanan
    Apabila pesanan baharu ditolak dari pelayan, maklumat pesanan perlu dipaparkan di halaman dapur. Kod khusus boleh ditulis mengikut situasi sebenar.
  3. Memaklumkan pengguna bahawa makanan sudah siap
    Apabila dapur menyediakan makanan, ia boleh menghantar mesej pemberitahuan kepada pengguna melalui WebSocket untuk memaklumkan pengguna bahawa makanan sudah siap. Untuk kod tertentu, sila rujuk contoh kod pada halaman hujung hadapan pengguna.

Ringkasan:
Melalui langkah di atas, kita boleh menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata. Pengguna boleh memilih hidangan dan menghantar pesanan pada halaman hadapan Pelayan menerima pesanan dan menolaknya ke dapur dan pengguna dalam masa nyata Halaman dapur memaparkan pesanan dan memberitahu pengguna dalam masa nyata bahawa makanan sudah siap. Menggunakan WebSocket boleh mencapai komunikasi dua hala masa nyata, meningkatkan pengalaman pengguna dan kecekapan perkhidmatan restoran.

Contoh Kod:
Disebabkan had ruang, contoh kod lengkap tidak boleh diberikan di sini. Walau bagaimanapun, pembaca boleh merujuk kepada dokumen berkaitan WebSocket dan Node.js, serta kod sampel sistem pesanan dalam talian sumber terbuka, untuk melaksanakan dan menambah baik sistem pesanan dalam talian masa nyata mereka sendiri.

Atas ialah kandungan terperinci Cara menggunakan JavaScript dan WebSocket untuk melaksanakan sistem pesanan dalam talian masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan