நிகழ்நேர இருவழித் தொடர்புக்கான நுழைவாயிலை நிறுவ Node.js இல் WebSockets என்ற கருத்தைப் புரிந்துகொள்வதில் இந்தக் கட்டுரை கவனம் செலுத்துகிறது.
வெப்சாக்கெட்டுகள்
வெப்சாக்கெட்டுகள் என்பது ஒரு வகை தகவல்தொடர்பு சேனலாகும், இது ஒரு ஒற்றை மற்றும் நீண்ட கால தகவல்தொடர்பு மூலம் இருவழி சேனல்களை உருவாக்குகிறது. இது இணையத்தில் வழக்கமான இருவழித் தொடர்பு போல் இல்லை, பயனர் மற்றும் சர்வர் இருவரும் எப்போது வேண்டுமானாலும் செய்திகளை அனுப்ப அனுமதிக்கிறது. பயன்படுத்தப்படும் நுட்பம் WebSocket ஹேண்ட்ஷேக் ஆகும், இது சேவையகத்திற்கும் பயனருக்கும் இடையே ஒரு மென்மையான இணைப்பை நிறுவுகிறது, இது எந்த பிரச்சனையும் இல்லாமல் தகவலை முன்னும் பின்னுமாக பகிர்ந்து கொள்ள உதவுகிறது.
சொந்தமாக ஒன்றை நிறுவுவதற்கு முன் WebSockets இன் சில சலுகைகளைப் பார்ப்போம்.
WebSockets இன் நன்மைகள்
பாரம்பரிய HTTP ஐ விட WebSockets பல நன்மைகளை வழங்குகிறது:
வேகமான வேகம்
பயனர் WebSocket ஐ அமைத்தால், இணைப்பு எப்போதும் திறந்தே இருக்கும், மேலும் இணைப்பைத் தொடங்கவோ நிறுத்தவோ தேவையில்லை, இது தாமதமின்றி விஷயங்களை விரைவாகச் செய்கிறது.
திறமையான வள பயன்பாடு
WebSockets கணினிகளின் வளங்களை திறமையாக பயன்படுத்துகிறது. ஒவ்வொரு கோரிக்கைக்கும் இணைப்பைத் தொடங்குவதில் அல்லது நிறுத்துவதில் நேரத்தை வீணடிக்காததால், கணினி மிகவும் உகந்ததாக வேலை செய்கிறது.
உடனடி புதுப்பிப்புகள்
அரட்டை, விளையாட்டு மதிப்பெண்கள் போன்ற தகவல்களை உடனடியாக நிகழ்நேரத்தில் பரிமாற்றம் செய்ய வேண்டிய ஒரு பயன்பாட்டைப் பயனர் உருவாக்கினால், தகவல் வேகமாகப் பயணிப்பதை WebSockets உறுதி செய்கிறது.
இப்போது நாம் எதை நிறுவ முயற்சிக்கிறோம் என்பதைப் பற்றி நன்றாகப் புரிந்து கொண்டதால், Node.js இல் சொந்தமாக ஒரு WebSocket ஐ உருவாக்குவோம்.
Node.js இல் WebSocket ஐ எவ்வாறு நிறுவுவது மற்றும் பயன்படுத்துவது?
உங்கள் சாதனத்தில் WebSocket ஐ வெற்றிகரமாக அமைக்க கீழே உள்ள படிகளைப் பின்பற்றவும்:
படி 1: மேம்பாட்டு சூழலை அமைக்கவும்
WebSocket ஐ நிறுவுவதற்கு முன் சில முன்தேவையான தொகுப்புகள் மற்றும் தொகுதிகள் நிறுவப்பட வேண்டும்.
உங்கள் சாதனத்தில் கீழே உள்ள தொகுப்புகளை நிறுவவும்:
npm init -ynpm நிறுவல் ws
இந்த கட்டளை வரிகளின் செயல்பாடு பின்வருமாறு:
- ' npm init -y ” ஒரு புதிய Node.js திட்டத்தை துவக்குகிறது. ' -மற்றும் ” கட்டளை என்பது ஆம் என்பது கணினி மொழியில் உண்மை என்று கட்டளையிடலாம். இது அனைத்து தொகுப்புகள் மற்றும் தொகுதிகள் பயன்படுத்தப்படும் என்பதை உறுதி செய்கிறது json கோப்பு. தி pack.json சார்புகள், தொகுதிகள் மற்றும் பிற அமைப்புகள் போன்ற Node.js திட்டம் பற்றிய அனைத்து தகவல்களையும் கோப்பு கொண்டுள்ளது.
- திட்டம் தொடங்கப்பட்ட பிறகு, பயனர் '' ஐ நிறுவ இரண்டாவது கட்டளையை இயக்கலாம் ws ” தொகுப்பு. இது சர்வர்கள் மற்றும் கிளையண்டுகளுக்கு Websocket ஐ உருவாக்கும் அடிப்படை API ஐ வழங்குகிறது.
இந்த இரண்டு கட்டளைகளும் WebSocket ஐ நிறுவுவதற்கும் நிகழ்நேரத்தில் தகவல்களைத் தொடர்புகொள்வதற்கும் ஒரு மேம்பாட்டு சூழலை அமைக்கின்றன.
Node.js இல் package.json கோப்பு
ஒரு pakackge.json கோப்பு Node.js திட்டத்திற்கான அனைத்து துணை செயல்பாடுகளையும் கொண்டுள்ளது.
Package.json கோப்பின் உள்ளடக்கங்கள் இப்படி இருக்கும்:
மேலே உள்ள படத்தில் உள்ள சிவப்பு வண்ணப் பெட்டி உங்கள் ws (WebSocket) நூலகத்தின் நிறுவப்பட்ட பதிப்பைக் காட்டுகிறது.
மேம்பாட்டு சூழலை அமைத்த பிறகு, WebSocket ஐ உருவாக்க தொடரவும்.
படி 2: WebSocket சேவையகத்தை உருவாக்குதல்
WebSocket சேவையகத்தை உருவாக்க, உங்கள் குறியீடு எடிட்டரில் .js நீட்டிப்பு மற்றும் விரும்பத்தக்க பெயருடன் ஒரு கோப்பை உருவாக்கவும்.
சர்வர் கோப்பிற்கான குறியீடு கீழே உள்ளது:
நிலையான வெப்சாக்கெட் = தேவை ( 'ws' ) ;நிலையான http = தேவை ( 'http' ) ;
நிலையான சர்வர் = http. உருவாக்கு சேவையகம் ( ) ;
நிலையான wss = புதிய வெப்சாக்கெட். சேவையகம் ( { சர்வர் } ) ;
wss. அன்று ( 'இணைப்பு' , ( ws ) => {
பணியகம். பதிவு ( 'கிளையண்ட் இணைக்கப்பட்டுள்ளார்' ) ;
ws. அன்று ( 'செய்தி' , ( செய்தி ) => {
பணியகம். பதிவு ( `பெறப்பட்டது : $ { செய்தி } ` ) ;
wss. வாடிக்கையாளர்கள் . ஒவ்வொரு ( ( வாடிக்கையாளர் ) => {
என்றால் ( வாடிக்கையாளர் !== ws && வாடிக்கையாளர். தயார்நிலை === வெப்சாக்கெட். திறந்த ) {
வாடிக்கையாளர். அனுப்பு ( செய்தி ) ;
}
} ) ;
} ) ;
ws. அன்று ( 'நெருக்கமான' , ( ) => {
பணியகம். பதிவு ( 'வாடிக்கையாளர் துண்டிக்கப்பட்டார்' ) ;
} ) ;
} ) ;
சர்வர். கேளுங்கள் ( 3000 , ( ) => {
பணியகம். பதிவு ( 'http://localhost:3000 இல் சேவையகம் கேட்கிறது' ) ;
} ) ;
மேலே உள்ள குறியீட்டால் செய்யப்படும் செயல்பாடுகள்:
- ' const WebSocket = தேவை (‘ws’) 'மற்றும்' const http = தேவை (‘http’) ” HTTP கோரிக்கைகளை கையாள தேவையான உள்ளமைக்கப்பட்ட தொகுதிகளை இறக்குமதி செய்கிறது.
- “const server = http.createServer()” Node.js இல் ஒரு அடிப்படை சேவையகத்தை உருவாக்குகிறது.
- ' const wss = புதிய WebSocket.Server({server}) ” உருவாக்கப்பட்ட HTTP சர்வரில் WebSocket ஐ உருவாக்குகிறது. வெப்சாக்கெட் உள்வரும் செய்திகளைக் கேட்க, இது ஒரு வெப் சாக்கெட் சேவையகத்தை அமைக்கிறது.
- ' on(‘இணைப்பு’, (ws) => {…}) ஒரு கிளையன்ட் ஒரு WebSocket இணைப்பை நிறுவும் போது ” செயல்படுத்தப்படுகிறது. ஒரு உதாரணம் ' ws ” இணைப்பைக் குறிக்கும் உருவாக்கப்பட்டது.
- ' on(‘செய்தி’, (செய்தி) => {…}) ” ஒரு செய்தி (இணைக்கப்பட்ட கிளையண்டிலிருந்து) சேவையகத்திற்கு வரும்போது இந்த குறியீடு செயல்படுத்தப்படுகிறது. இது பெறப்பட்ட செய்தியை பதிவுசெய்து, இணைக்கப்பட்ட அனைத்து வாடிக்கையாளர்களுக்கும் ஒளிபரப்புகிறது.
- ' clients.forEach((வாடிக்கையாளர்) => {…}) ” இணைக்கப்பட்ட அனைத்து கிளையண்டுகளிலும் சுழன்று, WebSocket இணைப்பு திறந்திருந்தால் ஒவ்வொரு கிளையண்டிற்கும் ஒரு செய்தியை அனுப்புகிறது.
- ' மீது (‘மூடு’, () => {…}) 'WebSocket இணைப்பிலிருந்து கிளையன்ட் துண்டிக்கப்பட்டு, கிளையன்ட் துண்டிக்கப்பட்டதைக் குறிக்கும் செய்தியை சேவையகத்திற்கு அனுப்பும்போது குறியீடு செயல்படுத்தப்படுகிறது.
- ' கேளுங்கள்(3000, () => {…}) 'போர்ட் 3000 இல் கேட்க HTTP சேவையகத்தைத் தொடங்குகிறது. சேவையகம் இயங்கியதும், சேவையகம் இப்போது “http://localhost:3000/”. Users can have some other port that is listening to the connections இல் கேட்கிறது என்ற செய்தியைக் குறிக்கிறது.
இப்போது எங்கள் WebSocket உருவாக்கப்பட்டது, அதை கிளையண்டின் முடிவில் இருந்து சோதிப்போம்.
படி 3: உருவாக்கப்பட்ட WebSocket ஐ சோதிக்க ஒரு கிளையண்டை உருவாக்கவும்
இப்போது WebSocket ஐ சோதிக்க, வலைப்பக்கத்தில் இயங்கும் அடிப்படை HTML கோப்பை உருவாக்கவும். ஒன்றை உருவாக்கவும் index.html கோப்பு மற்றும் கீழே உள்ள குறியீட்டைப் பயன்படுத்தவும்:
< html வெறும் = 'உள்' >
< தலை >
< மெட்டா எழுத்துக்குறி = 'UTF-8' >
< மெட்டா பெயர் = 'வியூபோர்ட்' உள்ளடக்கம் = 'அகலம்=சாதன அகலம், ஆரம்ப அளவு=1.0' >
< தலைப்பு > வெப்சாக்கெட் அரட்டை < / தலைப்பு >
< / தலை >
< உடல் >
< உள்ளீடு வகை = 'உரை' ஐடி = 'செய்தி உள்ளீடு' இடப்பெயர்ச்சி = 'ஒரு செய்தியை உள்ளிடவும்...' >
< பொத்தானை கிளிக் செய்யவும் = 'செய்தி அனுப்ப()' > அனுப்பு < / பொத்தானை >
< உல் ஐடி = 'அரட்டைச் செய்திகள்' >< / உல் >
< கையால் எழுதப்பட்ட தாள் >
const ws = புதிய WebSocket('ws://localhost:3000');
ws.addEventListener('open', (நிகழ்வு) => {
console.log('சேவையகத்துடன் இணைக்கப்பட்டது');
});
ws.addEventListener('செய்தி', (நிகழ்வு) => {
const chatMessages = document.getElementById('chatMessages');
const messageItem = document.createElement('li');
messageItem.textContent = event.data;
chatMessages.appendChild(messageItem);
});
செயல்பாடு sendMessage() {
const messageInput = document.getElementById('messageInput');
நிலையான செய்தி = messageInput.value;
என்றால் (செய்தி) {
ws.send(செய்தி);
messageInput.value = '';
}
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
< / html >
மேலே உள்ள குறியீட்டின் செயல்பாடு பின்வருமாறு:
- HTML க்கான அடிப்படை குறியீடு வடிவம் எழுதப்பட்டுள்ளது.
- ' ” என்பது HTML வலைப்பக்கத்தில் உள்ளீட்டுப் பெட்டியை உருவாக்குகிறது, இது பயனர் ஒரு செய்தியைத் தட்டச்சு செய்வதற்கான ஒரு செய்தியைக் குறிக்கும் ஒதுக்கிடத்தைக் கொண்டுள்ளது.
- ' ” என தட்டச்சு செய்த செய்தியை பயனரிடமிருந்து சர்வருக்கு அனுப்புகிறது.
- '
- “