Heute werde ich einen einfachen Chatraum implementieren, wobei NodeJs im Hintergrund und Socket.io in der Client- und Serverkommunikation verwendet werden. Dies ist ein relativ reifer WebSocket -Framework.
Erste Arbeit
1. Installieren Sie Express und verwenden Sie diese auf Host Socket.io und statische Seiten. Der Befehl npm install express --Save, -Save kann das Paket zur Datei package.json hinzufügen.
2. Installieren Sie Socket.io und Befehl NPM installieren Sie Socket.io - -SAVE.
Servercode schreiben
Zuerst hosten wir die Website über Express und fügen sie an die Socket.io -Instanz hinzu, da die erste Verbindung von Socket.io das HTTP -Protokoll erfordert
Die Codekopie lautet wie folgt:
var express = require ('express'),
IO = fordert ('Socket.io');
var app = express ();
app.use (express.static (__ DirName));
var server = app.listen (8888);
var ws = io.listen (Server);
Fügen Sie ein Serververbindungsereignis hinzu. Wenn die Client -Verbindung erfolgreich ist, wird eine Ankündigung ausgestellt, um allen Online -Benutzern zu erzählen, und wenn der Benutzer eine Nachricht sendet, wird eine Sendung gesendet, um andere Benutzer zu benachrichtigen.
Die Codekopie lautet wie folgt:
Ws.on ('Verbindung', Funktion (Client) {
console.log ('/033 [96msomeon ist connect/033 [39m/n');
client.on ('join', function (msg) {
// Auf Duplizierung prüfen
if (checknickname (msg)) {
client.emit ('Spitzname', 'Es gibt einen doppelten Spitznamen!');
}anders{
client.nickname = msg;
Ws.Sockets.Emit ('Ankündigung', 'System', MSG + 'schloss sich dem Chatraum an!');
}
});
// Senden Sie Nachrichten an
client.on ('send.message', function (msg) {
Client.Broadcast.emit ('send.message', client.nickname, msg);
});
// andere Benutzer beim Trennen benachrichtigen
client.on ('tricnect', function () {
if (client.nickname) {
Client.Broadcast.emit ('send.message', 'system', client.nickname + 'verlassen den Chatraum!');
}
})
})
Da der Client durch einen Spitznamen identifiziert wird, benötigt der Server eine Funktion, um die Duplikation von Spitznamen zu erkennen
Die Codekopie lautet wie folgt:
// Überprüfen Sie, ob der Spitzname dupliziert ist
var checknickname = function (name) {
für (var k in wsockets.sockets) {
if (Ws.sockets.sockets.hasownProperty (k)) {
if (Ws.Sockets.sockets [k] && ws.sockets.sockets [k] .nickname == name) {
zurückkehren;
}
}
}
false zurückgeben;
}
Kundendienstcode schreiben
Da der Server ein Webokcet-Framework von Drittanbietern verwendet, muss sich die Front-End-Seite separat auf den Socket.IO-Clientcode beziehen. Die Quelldatei finden Sie im Socket.io -Modul. Der Pfad unter Windows ist node_modules/socket.io/node_modules/socket.io-client/dist. Hier gibt es Entwicklungsversionen und komprimierte Versionen, und die Standardbeweise auf die Entwicklungsversion reichen aus.
Das Front-End verarbeitet hauptsächlich Eingabe-Spitzname-Überprüfungen, Nachrichtenverarbeitung und der vollständige Code wie folgt:
Die Codekopie lautet wie folgt:
<! DocType html>
<html>
<kopf>
<title> Socket.io Chat Room Beispiel </title>
<meta charset = "utf-8">
<link rel = "stylesheet" href = "css/reset.css"/>
<link rel = "stylesheet" href = "css/bootstrap.css"/>
<link rel = "stylesheet" href = "css/app.css"/>
</head>
<body>
<div>
<div id = "chat">
<ul id = "chat_conatener">
</ul>
</div>
<div>
<textarea> </textArea>
<button id = "löschen"> Bildschirm löschen </button>
<button id = "senden"> senden </button>
</div>
</div>
<script type = "text/javaScript" src = "js/socket.io.js"> </script>
<script type = "text/javaScript">
var ws = io.connect ('http://172.16.2.184:8888');
var sendsg = function (msg) {
ws.emit ('send.message', msg);
}
var addMessage = Funktion (von, msg) {
var li = document.createelement ('li');
li.innerhtml = '<span>' + von + '</span>' + ':' + msg;
document.querySelector ('#chat_conatener'). appendChild (li);
// Stellen Sie die Bildlaufleiste im Inhaltsbereich auf den Boden ein
document.querySelector ('#chat'). scrolltop = document.querySelector ('#chat'). scrollHeight;
// und setzen Sie den 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 (! msg) return;
sendsg (msg);
// Meldung zu Ihrem eigenen Inhaltsbereich hinzufügen
addMessage ('du', msg);
ele_msg.value = '';
}
ws.on ('connect', function () {
var spickname = window.prompt ('Geben Sie Ihren Spitznamen ein!');
während (! Spitzname) {
Spitzname = window.prompt ('Spitzname kann nicht leer sein, bitte wieder eintreten!')
}
Ws.emit ('Join', Spitzname);
});
// Es gibt doppelte Spitznamen
Ws.on ('Spitzname', function () {
var spickname = window.prompt ('Der Spitzname hat Duplikate, bitte wieder eintreten!');
während (! Spitzname) {
Spitzname = window.prompt ('Spitzname kann nicht leer sein, bitte wieder eintreten!')
}
Ws.emit ('Join', Spitzname);
});
Ws.on ('send.message', function (from, msg) {
addMessage (von, msg);
});
Ws.on ('Ankündigung', Funktion (von, msg) {
addMessage (von, msg);
});
document.querySelector ('textarea'). addEventListener ('tastePress', Funktion (Ereignis) {
if (event.which == 13) {
schicken();
}
});
document.querySelector ('textarea'). addEventListener ('Keydown', Funktion (Ereignis) {
if (event.which == 13) {
schicken();
}
});
document.querySelector ('#send'). addEventListener ('klick', function () {
schicken();
});
Document.querySelector ('#Clear'). AddEventListener ('Click', Function () {
document.querySelector ('#chat_conatener'). Innerhtml = '';
});
</script>
</body>
</html>
Die vollständige Code -Komprimierungsdatei wird hier bereitgestellt
Zusammenfassen
NodeJS ist eine gute Sache, besonders wenn es um Messaging- und Netzwerkprogrammierung und natürliche asynchrone IO geht.