سأقوم اليوم بتنفيذ غرفة دردشة بسيطة ، باستخدام NodeJs في الخلفية ، و socket.io في اتصال العميل والخادم. هذا هو إطار WebSocket ناضج نسبيا.
العمل الأولي
1. تثبيت Express ، استخدم هذا لاستضافة Socket.io والصفحات الثابتة. يمكن لـ NPM Install Express -Save ، -Save إضافة الحزمة إلى ملف Package.json.
2. قم بتثبيت socket.io ، وأمر NPM تثبيت socket.io -save.
كتابة رمز الخادم
أولاً ، نستضيف موقع الويب من خلال Express ورفعه إلى مثيل Socket.io ، لأن الاتصال الأول لـ Socket.io يتطلب بروتوكول HTTP
نسخة الكود كما يلي:
var express = require ('Express') ،
io = require ('socket.io') ؛
var app = express () ؛
app.use (express.static (__ dirname)) ؛
var server = app.listen (8888) ؛
var ws = io.listen (server) ؛
إضافة حدث اتصال الخادم. عندما يكون اتصال العميل ناجحًا ، يتم إصدار إعلان لإخبار جميع المستخدمين عبر الإنترنت ، وعندما يرسل المستخدم رسالة ، يتم إرسال البث لإخطار المستخدمين الآخرين.
نسخة الكود كما يلي:
ws.on ('connection' ، function (client) {
console.log ('/033 [96msomeone هو connect/033 [39m/n') ؛
client.on ('Join' ، function (msg) {
// تحقق من الازدواجية
if (checkNickName (msg)) {
client.emit ("الاسم المستعار" ، "هناك لقب مكرر!") ؛
}آخر{
client.nickName = msg ؛
ws.sockets.emit ("الإعلان" ، "النظام" ، MSG + "انضم إلى غرفة الدردشة!") ؛
}
}) ؛
// استمع إلى إرسال الرسائل
client.on ('send.message' ، function (msg) {
client.broadcast.emit ('send.message' ، client.nickname ، msg) ؛
}) ؛
// إخطار المستخدمين الآخرين عند الفصل
client.on ('disconnect' ، function () {
if (client.nickname) {
client.broadcast.emit ('send.message' ، 'system' ، client.nickname + 'اترك غرفة الدردشة!') ؛
}
})
})
منذ أن تم تحديد العميل بواسطة لقب ، يحتاج الخادم إلى وظيفة لاكتشاف تكرار الأسماء المستعارة
نسخة الكود كما يلي:
// تحقق مما إذا تم تكرار اللقب
var checkNickName = function (name) {
لـ (var k في ws.sockets.sockets) {
if (ws.sockets.sockets.hasownproperty (k)) {
if (ws.sockets.sockets [k] && ws.sockets.sockets [k] .nickname == name) {
العودة صحيح.
}
}
}
العودة كاذبة
}
اكتب رمز خدمة العملاء
نظرًا لأن الخادم يستخدم إطار عمل WebSoKcet التابع لجهات خارجية ، فإن الصفحة الأمامية تحتاج إلى الرجوع إلى رمز عميل Socket.io بشكل منفصل. يمكن العثور على الملف المصدر من وحدة Socket.io. المسار أسفل Windows هو node_modules/socket.io/node_modules/socket.io-client/dist. هناك إصدارات تطوير وإصدارات مضغوطة هنا ، والمراجع الافتراضية إلى إصدار التطوير كافي.
يعالج الواجهة الأمامية اختبارات لقب الإدخال بشكل أساسي ومعالجة الرسائل والرمز الكامل كما يلي:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<title> socket.io chat غرفة الدردشة مثال </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>
<viv>
<div id = "chat">
<ul id = "chat_conatener">
</ul>
</div>
<viv>
<evideArea> </textarea>
<button id = "clear"> مسح الشاشة </button>
<button id = "send"> إرسال </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 sendmsg = function (msg) {
ws.emit ('send.message' ، msg) ؛
}
var addMessage = function (from ، msg) {
var li = document.createElement ('li') ؛
li.innerhtml = '<span>' + from + '</span>' + ':' + msg ؛
document.queryselector ('#chat_conatener'). appendChild (li) ؛
// قم بتعيين شريط التمرير في منطقة المحتوى إلى الأسفل
document.queryselector ('#chat'). scrolltop = document.queryselector ('#chat'). scrollheight ؛
// وضع التركيز
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) ؛
إذا (! msg) العودة ؛
sendmsg (msg) ؛
// أضف رسالة إلى منطقة المحتوى الخاصة بك
addMessage ('you' ، msg) ؛
ele_msg.value = '' ؛
}
ws.on ('connect' ، function () {
var neckname = window.prompt ('أدخل اسم اللقب الخاص بك!') ؛
بينما (! لقب) {
لقب = window.prompt ("لا يمكن أن يكون اللقب فارغًا ، يرجى إعادة الدخول!")
}
ws.emit ('Join' ، Levelame) ؛
}) ؛
// هناك ألقاب مكررة
WS.ON ("لقب" ، وظيفة () {
VAR NOURKNAME = window.prompt ('اسم اللقب يكرر ، يرجى إعادة الدخول!') ؛
بينما (! لقب) {
لقب = window.prompt ("لا يمكن أن يكون اللقب فارغًا ، يرجى إعادة الدخول!")
}
ws.emit ('Join' ، Levelame) ؛
}) ؛
ws.on ('send.message' ، وظيفة (من ، msg) {
addMessage (من ، msg) ؛
}) ؛
ws.on ('إعلان' ، وظيفة (من ، msg) {
addMessage (من ، msg) ؛
}) ؛
document.queryselector ('textarea'). addeventListener ('keypress' ، function (event) {
if (event.hich == 13) {
يرسل()؛
}
}) ؛
document.queryselector ('textarea'). addeventListener ('keydown' ، function (event) {
if (event.hich == 13) {
يرسل()؛
}
}) ؛
document.queryselector ('#send'). addeventListener ('click' ، function () {
يرسل()؛
}) ؛
document.queryselector ('#clear'). addeventListener ('click' ، function () {
document.queryselector ('#chat_conatener'). innerhtml = '' '؛
}) ؛
</script>
</body>
</html>
يتم توفير ملف ضغط الرمز الكامل هنا
لخص
تعتبر Nodejs شيئًا جيدًا ، خاصةً عندما يتعلق الأمر بالتعامل مع المراسلة وبرمجة الشبكات ، IO غير المتزامن الطبيعي.