Hari ini saya akan menerapkan ruang obrolan sederhana, menggunakan nodeJs di latar belakang, dan socket.io dalam komunikasi klien dan server. Ini adalah kerangka kerja Websocket yang relatif matang.
Pekerjaan awal
1. Instal Express, gunakan ini untuk hosting socket.io dan statis halaman. Perintah NPM Instal Express --Save, -Save dapat menambahkan paket ke file package.json.
2. Instal socket.io, dan perintah instal npm socket.io -save.
Menulis kode server
Pertama, kami meng -host situs web melalui Express dan melampirkannya ke instance Socket.io, karena koneksi pertama Socket.io memerlukan protokol HTTP
Salinan kode adalah sebagai berikut:
var express = membutuhkan ('ekspres'),
io = membutuhkan ('socket.io');
var app = express ();
app.use (express.static (__ dirname));
var server = app.listen (8888);
var ws = io.listen (server);
Tambahkan acara koneksi server. Ketika koneksi klien berhasil, pengumuman dikeluarkan untuk memberi tahu semua pengguna online, dan ketika pengguna mengirim pesan, siaran dikirim untuk memberi tahu pengguna lain.
Salinan kode adalah sebagai berikut:
ws.on ('koneksi', fungsi (klien) {
Console.log ('/033 [96MSomeone adalah Connect/033 [39m/n');
client.on ('goint', function (msg) {
// periksa duplikasi
if (checkNickName (msg)) {
client.emit ('julukan', 'ada nama panggilan duplikat!');
}kalau tidak{
client.nickname = msg;
ws.sockets.emit ('pengumuman', 'sistem', msg + 'bergabung dengan ruang obrolan!');
}
});
// dengarkan pesan mengirim
client.on ('send.message', function (msg) {
client.broadcast.emit ('send.message', client.nickname, msg);
});
// beri tahu pengguna lain saat memutuskan hubungan
client.on ('Disconnect', function () {
if (client.nickname) {
client.broadcast.emit ('send.message', 'system', client.nickname + 'tinggalkan ruang obrolan!');
}
})
})
Karena klien diidentifikasi dengan nama panggilan, server membutuhkan fungsi untuk mendeteksi duplikasi nama panggilan
Salinan kode adalah sebagai berikut:
// Periksa apakah julukan itu digandakan
var checknickname = function (name) {
untuk (var k in ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && w.sockets.sockets [k] .nickname == name) {
Kembali Benar;
}
}
}
mengembalikan false;
}
Tulis kode layanan pelanggan
Karena server menggunakan kerangka kerja websokcet pihak ketiga, halaman front-end perlu merujuk ke kode klien socket.io secara terpisah. File sumber dapat ditemukan dari modul socket.io. Jalur di bawah windows adalah node_modules/socket.io/node_modules/socket.io-client/dist. Ada versi pengembangan dan versi terkompresi di sini, dan referensi default untuk versi pengembangan sudah cukup.
Front-end terutama memproses pemeriksaan nama panggilan input, pemrosesan pesan, dan kode lengkapnya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<title> Socket.io CHAT ROOM Contoh </iteme>
<meta charset = "UTF-8">
<tautan rel = "stylesheet" href = "css/reset.css"/>
<tautan rel = "stylesheet" href = "css/bootstrap.css"/>
<tautan rel = "stylesheet" href = "css/app.css"/>
</head>
<body>
<div>
<Div id = "chat">
<ul id = "chat_conateTener">
</ul>
</div>
<div>
<TextArea> </textarea>
<tombol id = "CLEAR"> CLEAR SCREEN </tombol>
<tombol id = "Kirim"> Kirim </tombol>
</div>
</div>
<type skrip = "Text/JavaScript" src = "js/socket.io.js"> </script>
<type skrip = "Teks/JavaScript">
var ws = io.connect ('http://172.16.2.184:8888');
var sendmsg = function (msg) {
ws.emit ('send.message', msg);
}
var addMessage = function (from, msg) {
var li = document.createelement ('li');
li.innerHtml = '<span>' + dari + '</span>' + ':' + msg;
Document.QuerySelector ('#chat_conateNer'). AppendChild (Li);
// Atur bilah gulir di area konten ke bawah
document.queryselector ('#chat'). scrolltop = document.queryselector ('#chat'). scrollHeight;
// dan atur fokus
document.queryselector ('textarea'). focus ();
}
var send = function () {
var ele_msg = document.queryselector ('textarea');
var msg = ele_msg.value.replace ('/r/n', '') .trim ();
console.log (msg);
if (! ms) kembali;
sendmsg (msg);
// Tambahkan pesan ke area konten Anda sendiri
addMessage ('Anda', msg);
ele_msg.value = '';
}
ws.on ('connect', function () {
var nickname = window.promppt ('masukkan nama panggilan Anda!');
while (! nickname) {
nickname = window.promppt ('nama panggilan tidak bisa kosong, mohon masukkan kembali!')
}
ws.emit ('bergabung', julukan);
});
// Ada julukan duplikat
ws.on ('nickname', function () {
var nickname = window.prompt ('nama panggilan memiliki duplikat, mohon masukkan kembali!');
while (! nickname) {
nickname = window.promppt ('nama panggilan tidak bisa kosong, mohon masukkan kembali!')
}
ws.emit ('bergabung', julukan);
});
ws.on ('send.message', function (from, msg) {
addMessage (dari, msg);
});
ws.on ('pengumuman', fungsi (dari, msg) {
addMessage (dari, msg);
});
Document.QuerySelector ('TexTarea'). AddEventListener ('KeyPress', Function (Event) {
if (event.whech == 13) {
mengirim();
}
});
Document.QuerySelector ('TextAreA'). AddEventListener ('KeyDown', Function (Event) {
if (event.whech == 13) {
mengirim();
}
});
document.queryselector ('#kirim'). addeventListener ('klik', function () {
mengirim();
});
Document.QuerySelector ('#clear'). AddEventListener ('klik', function () {
document.queryselector ('#chat_conateNer'). innerHtml = '';
});
</script>
</body>
</html>
File kompresi kode lengkap disediakan di sini
Meringkaskan
NodeJs adalah hal yang baik, terutama ketika harus menangani pesan dan pemrograman jaringan, IO asinkron alami.