🐴 🐮 👩🏿‍🍳 Node.js और Socket.IO पर एक चैट बनाएं 🗻 ❓ 🗞️

इस लेख में मैं यह दिखाने की कोशिश करूंगा कि आप सॉकेट के साथ संयोजन में Node.js का उपयोग करके एक सरल चैट कैसे बना सकते हैं। प्रारंभ में, मैं शुद्ध वेबस्कैट पर एक चैट बनाना चाहता था, लेकिन मुझे इंटरनेट पर उनके लिए तैयार सर्वर कार्यान्वयन की लगभग पूरी कमी थी। इसलिए मैंने पहिया को सुदृढ़ नहीं करने का फैसला किया, लेकिन एक तैयार पुस्तकालय का उपयोग करने के लिए।
मेरे मामले में, सर्वर उबंटू के तहत चलता है, इसलिए सभी उदाहरण इसके लिए होंगे (और उदाहरणों में लिंक इसके लिए होंगे)।

घटक स्थापना

सबसे पहले, हमें स्वयं Node.js (स्थापना निर्देश और डाउनलोड लिंक यहां ) और Socket.IO की आवश्यकता है। Npm.js के लिए मॉड्यूल npm प्रबंधक का उपयोग करके स्थापित करना सबसे आसान है -

curl http://npmjs.org/install.sh | sh npm install socket.io

सर्वर साइड

सर्वर साइड की संरचना इस प्रकार है: सर्वर एक संदेश प्राप्त करता है, अगर यह एक कमांड है, तो यह कुछ क्रियाएं करता है, अगर यह सिर्फ एक संदेश है, तो यह अन्य सभी प्रतिभागियों को भेजता है।

 //       8080- - 80    http- var io = require('socket.io').listen(8080); //     -   production' io.set('log level', 1); //       io.sockets.on('connection', function (socket) { // ..   -       5   ID  var ID = (socket.id).toString().substr(0, 5); var time = (new Date).toLocaleTimeString(); //     ,        socket.json.send({'event': 'connected', 'name': ID, 'time': time}); //    ,        socket.broadcast.json.send({'event': 'userJoined', 'name': ID, 'time': time}); //      socket.on('message', function (msg) { var time = (new Date).toLocaleTimeString(); //  ,        socket.json.send({'event': 'messageSent', 'name': ID, 'text': msg, 'time': time}); //      socket.broadcast.json.send({'event': 'messageReceived', 'name': ID, 'text': msg, 'time': time}) }); //    -   socket.on('disconnect', function() { var time = (new Date).toLocaleTimeString(); io.sockets.json.send({'event': 'userSplit', 'name': ID, 'time': time}); }); });

इस कोड में (और थोड़ा और):
io.sockets - सभी जुड़े हुए ग्राहकों का चयन करें
io.sockets.sockets [आईडी] - आईडी आईडी के साथ एक विशिष्ट ग्राहक का चयन
सॉकेट - "वर्तमान" क्लाइंट का चयन करें
socket.send (पाठ) - "मूल" घटना, एक पाठ संदेश भेज रहा है
socket.json.send ({}) - JSON प्रारूप में एक संदेश भेज रहा है
socket.broadcast.send - वर्तमान को छोड़कर सभी क्लाइंट को एक संदेश भेजें
socket.emit (EVENT, JSON) - JSON डेटा के साथ एक कस्टम EVENT ईवेंट भेजना (उदाहरण के लिए, socket.emit ('whereami', {'location': loc})) का उपयोग मानक घटनाओं को 'कनेक्टेड', 'मैसेज' को फिर से लिखने के लिए किया जा सकता है। और 'डिस्कनेक्ट' करें।
socket.on (EVENT, CALLBACK) - EVENT घटना होने पर CALLBACK फ़ंक्शन को कॉल करें (उदाहरण के लिए, socket.on ('whereami', function (loc) {कंसोल.लॉग ('I + m in' + loc + '!)) ;}))
मैं JSON में ग्राहकों को संदेश भेजता हूं, क्योंकि संदेश पाठ स्वयं क्लाइंट में उत्पन्न होता है। इस प्रकार, डेटा की प्रस्तुति सर्वर पर निर्भर नहीं करती है और इसे छूने के बिना इसे बदलना आसान है (उदाहरण के लिए, भाषा को बदलना); इसके अलावा, सर्वर और क्लाइंट के बीच थोड़ी मात्रा में डेटा ट्रांसफर किया जाता है।

ग्राहक भाग

HTML और CSS

index.html:

 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link href="style.css" rel="stylesheet"> <script src="http://46.182.31.65:8080/socket.io/socket.io.js"></script> <script src="client.js"></script> </head> <body> <div id="log"></div><br> <input type="text" id="input" autofocus><input type="submit" id="send" value="Send"> </body> </html>

style.css

 #log { width: 590px; height: 290px; border: 1px solid rgb(192, 192, 192); padding: 5px; margin-bottom: 5px; font: 11pt 'Palatino Linotype'; overflow: auto; } #input { width: 550px; } #send { width: 50px; } .in { color: rgb(0, 0, 0); } .out { color: rgb(0, 0, 0); } .time { color: rgb(144, 144, 144); font: 10pt 'Courier New'; } .system { color: rgb(165, 42, 42); } .user { color: rgb(25, 25, 112); }

जावास्क्रिप्ट

socket.io.js को नोड नोड्स को स्वतः ही नोडजेसपीपी [: port] /socket.io/socket.io.js पर दिया जाता है - और कुछ नहीं करना चाहिए।
client.js

 //      strings = { 'connected': '[sys][time]%time%[/time]:       [user]%name%[/user].[/sys]', 'userJoined': '[sys][time]%time%[/time]:  [user]%name%[/user]   .[/sys]', 'messageSent': '[out][time]%time%[/time]: [user]%name%[/user]: %text%[/out]', 'messageReceived': '[in][time]%time%[/time]: [user]%name%[/user]: %text%[/in]', 'userSplit': '[sys][time]%time%[/time]:  [user]%name%[/user]  .[/sys]' }; window.onload = function() { //    ; websockets -    ,  xhr if (navigator.userAgent.toLowerCase().indexOf('chrome') != -1) { socket = io.connect('http://46.182.31.65:8080', {'transports': ['xhr-polling']}); } else { socket = io.connect('http://46.182.31.65:8080'); } socket.on('connect', function () { socket.on('message', function (msg) { //    ,  ,      document.querySelector('#log').innerHTML += strings[msg.event].replace(/\[([az]+)\]/g, '<span class="$1">').replace(/\[\/[az]+\]/g, '</span>').replace(/\%time\%/, msg.time).replace(/\%name\%/, msg.name).replace(/\%text\%/, unescape(msg.text).replace('<', '&lt;').replace('>', '&gt;')) + '<br>'; //     document.querySelector('#log').scrollTop = document.querySelector('#log').scrollHeight; }); //   <Enter>     document.querySelector('#input').onkeypress = function(e) { if (e.which == '13') { //   input',   escape- socket.send(escape(document.querySelector('#input').value)); //  input document.querySelector('#input').value = ''; } }; document.querySelector('#send').onclick = function() { socket.send(escape(document.querySelector('#input').value)); document.querySelector('#input').value = ''; }; }); };

अंत में, हम फ़ाइल और पृष्ठभूमि में लॉग के साथ सर्वर शुरू करते हैं -

 node server.js > output.log &

(यह ध्यान देने योग्य है कि मेरी स्क्रिप्ट केवल उस उपयोगकर्ता निर्देशिका से लॉन्च की गई थी जहाँ नोड। js स्थापित था)

सभी स्रोतों को यहां से डाउनलोड किया जा सकता है । मैं तुरंत कहता हूं कि मैं एक प्रोग्रामिंग गुरु नहीं हूं और मैंने अपने लिए लिखा है, इसलिए मैं आपसे अनाड़ीपन की कसम नहीं खाने के लिए कहता हूं (और यह बेकार है)। क्योंकि जबकि Apache स्थैतिक देता है, इसे आपके कंप्यूटर पर चलाने की सलाह दी जाती है। यदि आलस्य या असुविधाजनक / नहीं हो सकता है - तो एक जीवंत उदाहरण यहां देखा जा सकता है ।

कोड का परीक्षण किया गया है और ओपेरा 11+, फ़ायरफ़ॉक्स 5+, क्रोम 12+ में काम करता है। लॉग को देखते हुए, IE9 पैकेट को जोड़ता है, प्राप्त करता है और भेजता है, लेकिन यह ब्राउज़र को प्रभावित नहीं करता है।

प्रयुक्त सामग्री:
socket.io/#how-to-use
github.com/LearnBoost/Socket.IO/wiki/Migrating-0.6-to-0.7
google.com

अगले अंक में: हम संदेश इतिहास को दर्ज करते हैं, अपना नाम बदलते हैं, निजी रूप से किसी अन्य खिलाड़ी को लिखते हैं, और बहुत कुछ!

Node.js और Socket.IO पर एक चैट बनाएं

घटक स्थापना

सर्वर साइड

ग्राहक भाग

HTML और CSS

जावास्क्रिप्ट

More articles: