ඔබ තවමත් Widane Forums සාමාජිකයෙක් නෙවෙයි ද..?

Widane Forums හි සියළුම ලිපිවල ඇති සියළුම Links වෙත පිවිසීමට නම් ලියාපදිංචිවීම අනිවාර්යයි.
ඔබගේ සියලුම තාක්ෂණික ගැටළු සඳහා විසඳුම් සොගැනීමට වගේම දැනුම බෙදාගැනීම සඳහා මෙහි ඉඩකඩ වෙන්කර තිබෙනවා.
ඉතින් ඇයි තවත් බලාගෙන ඉන්නේ ඉක්මනින් ලියාපදිංචිවී ඔබගේ දැනුම වැඩිකරගන්න.

Register Here




socket.io.js කියලා දෙන්න පුලුවන්ද?
#1
මේක use කරලා realtime cricket score කරන සයිට් එකක් හදන්න ඕනෙ.. ටියුට් එකක් දාන්න පුලුවන්ද ඇඩ්මින්?  Huh Huh Huh Huh
Regards,
Golden Dragon.
"There are 10 types of people in this world. Those that understand binary and those that don't. Tongue "
#2
Thumbs Up 
Socket.IO ගැන අදහසක් දෙන්නයි මේක ලියන්නෙ. මම මේ හදන්න යන site එකේ pages දෙකක් තියෙනවා. 1) data පෙන්වන page එක. 2) data enter කරන page එක. data enter කරන page එකේ තියෙන textbox එකට data type කරලා submit කරාම data පෙන්වන page එකේ අදාල data එක update වෙන්න ඕනෙ. හැබැයි මේක වෙන්න ඕනෙ realtime. ඒ කියන්නෙ, data enter කරපු ගමන් එහා පැත්තෙ වෙනස් වෙන්න ඕනෙ, ඒ පැත්තෙ page එක refresh කරන්නෙ නැතුව.

මම මේක ලියන්නෙ Socket.IO සහ Express libraries දෙක පාවිච්චි කරලා. ඒ වගේම මේක ලියන්නෙ NodeJS වලට නිසා මේ code එක try කරන්න නම් NodeJS install කරලා තියෙන්න ඕනෙ. ඊට අමතරව node සහ npm command දෙක command prompt එකේ පාවිච්චි කරන්න පුළුවන් වෙන්නත් ඕනෙ (NodeJS, PATH එකට add කරලා තියෙන්න ඕනෙ). OS එක windows ද, linux ද කියල ප්‍රශ්නයක් නෑ.

මුලින්ම අලුතින් folder එකක් හදන්න තමන්ට කැමති නමකින්. මම මේකට නම දානවා socket.io-demo කියලා. ඊලඟට මේ folder එක command prompt එකෙන් open කරගන්න. (Shift එක ඔබාගෙන් folder එක ඇතුලෙ right click කරලා, open command prompt here තෝරන්න).

package.json

Node ඇප් එකක් හදද්දි අපි මුලින්ම කරන්න ඕනෙ package.json file එක හදාගන්න එක. මේ file එකේ තමා අපේ ඇප් එක ගැන විස්තර තියෙන්නෙ. සාමන්‍ය විස්තර (නම, description එක, version එක) වලට අමතරව මේකෙ තව තියෙනවා අපි පාවිච්චි කරන libraries ගැනත් විස්තර. ඉස්සරහට යද්දි ඒ ගැන පැහැදිලි වෙයි. package.json file එක හදාගන්න පහළ තියෙන command එක දෙන්න. මේ command එක run වෙද්දි අපෙන් ප්‍රශ්න කිහිපයක් අහනවා. Name එක සහ Description එකට තමන් කැමති එකක් දෙන්න පුළුවන් (නම දෙද්දි අකුරු, ඉලක්කම් සහ dashes විතරක් දෙනවා නම් හොඳයි). අනිත් ඒවට මුකුත් type නොකර Enter ඔබන්න. එතකොට වරහන් ඇතුලෙ තියෙන default value එක ගන්නවා. අන්තිමට අහනවා උඩ දීපු විස්තර හරිද කියලා ඒකට yes දෙන්න.

$ npm init

command එක run හරියට run වුණා නම් දැන් මේ folder එකේ package.json file එකක් හැදිලා ඇති. මේ file එක open කරලා බැලුවොත් මේ වගේ content එකක් බලාගන්න පුළුවන්. (ඔයගොල්ලො දීපු values වල හැටියට මේ file එක පොඩ්ඩක් වෙනස් වෙන්න පුළුවන්)

{
 "name": "socket-io-demo",
 "version": "1.0.0",
 "description": "A realtime data updating with socket.io",
 "main": "index.js",
 "scripts": {
   "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "0xEDD1E",
 "license": "MIT"
}

Express

ඊලඟට කරන්න තියෙන්නෙ express framework එක install කරගන්න එක. Express කියන්නෙ NodeJS වලින් web server එකක් හදාගන්න පාවිච්චි කරන framework එකක්. Express කියන්නෙ PHP වලදි Apache server එක වගේ. අපේ Node app එකක් run කරන්න අවශ්‍ය වෙන library එකක්, Node භාෂාවෙන් කිව්වොත් npm package එකක්, install කරන්න අපි පාවිච්චි කරන්නෙ npm install කියන command එක. මේ command එක පාවිච්චි කරලා අපිට මේ විදිහට express install කරගන්න පුළුවන්.

$ npm install express

දැන් අපිට ටික වෙලාවක් ඉන්න වෙනවා. මෙතනදි express එක සහ ඒකට අවශ්‍ය dependencies download වෙනවා. ඒ නිසා මේකට යන වෙලාව ඔයගොල්ලන්ගේ internet connection එක මත තීරණය වෙනවා. කොහොම වුනත් මේකට ගොඩක් data යන්නෙ නෑ. command එක run වෙලා ඉවර වුණාම අපේ folder එක ඇතුලෙ node_modules කියලා අලුත් folder එකක් හැදිලා තියෙනවා පේනවා ඇති. මේ folder එක ඇතුලේ තමා අර download වුනු files තියෙන්නෙ. ඊලඟට තවත් වෙනසක් වෙනවා package.json file එකේ. දැන් package.json එක open කරලා බැලුවොත් ඔයගොල්ලන්ට පෙනෙයි අලුතින් dependencies කියලා කොටසක් එකතු වෙලා තියෙනවා.

"dependencies": {
   "express": "^4.16.4"
}

මේකෙ තේරුම තමා මේ ඇප් එක run කරන්න නම් express 4.16.4 ට වැඩි version එකක් අවශ්‍යයි කියන එක.

දැන් අපි express install කරගත්තු නිසා අපේ ඇප් එක express වලට setup කරගමු. index.js කියලා අලුතින් file එකක් හදලා ඒක open කරගෙන මේ විදිහට code එක ලියාගන්න.

// 1
const express = require('express');
const http = require('http');

// 2
const app = express();
const server = http.Server(app);

// 3
app.get('/update', function(req, res) {
 res.sendFile(__dirname + '/update.html');
});

// 4
app.get('/', function(req, res) {
 res.sendFile(__dirname + '/view.html');
});

// 5
server.listen(4000, () => {
 console.log('server is listening at http://localhost:4000');
});

මේ code එකේ ප්‍රධාන කොටස් පහක් මම දක්වලා තියෙනවා.
  1. පළවෙනි පේලි දෙකෙන් කරන්නෙ express සහ http libraries දෙක import කිරීම. ඒ කියන්නෙ වෙන තැනක ලියපු codes අපේ code එකේ පාවිච්චියට ගැනීම.
  2. ඊලඟට මම app කියලා variable එකක් හදාගන්නවා. මේ variable එකේ තියෙන්නෙ express server එකට අදාල function එක. ඊලඟ පේලියෙ server කියලා variable එක තමා අපේ server එක වෙන්නෙ. මේක හදන්නෙ socket.io වලට වුවමනා නිසා.
  3. තුන්වෙනි කොටසෙන් තමයි update page එක serve කරන්නෙ. මේ code එකේ '/update' කියන්නෙ page එකේ නම. මේ page එකට request එකක් ආවම express එක කරන්නෙ function(req, res) {...} කියලා අපි දීලා තියෙන function එක call කරන එක. මේ function එකේ මම ලියලා තියෙන්නෙ, update.html file එක send කරන්න කියලා. update.html file එක මම තව ටිකකින් හදනවා.[
  4. හතරවෙනි කොටසත් තුන්වෙනි කොටස වගේම දෙයක් තමයි කරන්නෙ. මේක ලියලා තියෙන්නෙ index page එකට. send කරන්නෙ view.html file එක.
  5. පස්වෙනි කොටසින් තමා server එක start කරන්නෙ. මේ server එක port 4000 උඩ දුවන විදිහටයි code එක ලියලා තියෙන්නෙ.
තවම අපිට මේක run කරන්න අමාරුයි මොකද update.html සහ view.html file දෙක හදලා නැති නිසා. අපි ඒ file දෙකත් හදමු. මේ file දෙක මේ නම් වලින්ම index.js file එක තියෙන folder එකේම save කරන්න ඕනෙ.

update.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Update data realtime</title>
</head>
<body>
 <form action="">
   <input type="text" id="data">
   <button type="submit">Update</button>
 </form>
</body>
</html>

view.html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>View Data realtime</title>
</head>
<body>
 Current valus is: <span id="disp"></span>
</body>
</html>

දැන් අපේ ඇප් එක run කරන්න පුළුවන්. ඒකට මේ command එක දෙන්න.
$ node index.js

දැන් browser එකේ http://localhost:4000 සහ http://localhost:4000/update කියන link දෙකට ගියොත් මේ වගේ web page දෙකක් බලාගන්න පුළුවන්.

[Image: jobHLqOl.png]

(server එක නවත්වන්න command prompt එකේ Ctrl+C දෙන්න.)

Socket.IO

ඊලඟට අපිට කරන්නෙ තියෙන්නෙ මේ ඇප් එකට Socket.IO එකතු කිරීම. Socket.IO library එකේ කොටස් දෙකක් තියෙනවා.
  1. NodeJS HTTP server එකත් එක්ක run වෙන server-side library එක
  2. Browser එකේ run වෙන client-side library එක.

අපි මුලින්ම බලමු server-side library එක setup කරගන්න හැටි. මුලින්ම අපි socket.io npm package එක install කරගන්න ඕනෙ.

$ npm install socket.io

දැන් අපිට අපේ code එක ඇතුලෙ socket.io library එක පාවිච්චි කරන්න පුළුවන්. index.js file එකට ගිහින්, app.get('/update, ...); කොටසට  කලින් මේ line දෙක දෙන්න.

const socketIO = require('socket.io');
const io = socketIO(server);

මෙතන io කියන්නෙ අපේ socket.io server එක. ඊලඟට මට ඕනෙ client කෙනෙක් මේ socket.io server එකට connect උනොත් 'user connected' කියලා command prompt එකේ print වෙන විදිහට හදාගන්න. මේකට මම server.listen(4000, ...);  කියන කොටසට කලින් මේ code එක දානවා.

io.on('connection', (socket) => {
 console.log('user connected');
});

දැන් අපේ සම්පූර්ණ code එක මේ විදිහ වෙන්න ඕනෙ,

const express = require('express');
const http = require('http');

const app = express();
const server = http.Server(app);

const socketIO = require('socket.io');
const io = socketIO(server);

app.get('/update', function(req, res) {
 res.sendFile(__dirname + '/update.html');
});

app.get('/', function(req, res) {
 res.sendFile(__dirname + '/view.html');
});

io.on('connection', function(socket) {
 console.log('user connected');
});

server.listen(4000, function() {
 console.log('server is listening at http://localhost:4000');
});

දැන් අපි backend (server-side) එක setup කරගෙන ඉවරයි. ඊලඟට තියෙන්නෙ frontend (client-side) එක setup කරගන්න එක. මේකට කරන්න තියෙන්නෙ පොඩි වැඩක්. update.html සහ view.html file දෙකේම </body> tag එකට කලින් මේ code එක දාන්න

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
 var socket = io();
</script>

(ඉස්සරහට වුවමනා වෙන නිසා මම jQuery library එකත් add කරලා තියෙනවා)

දැන් ආයෙත් server එක run කරලා http://localhost:4000 සහ http://localhost:4000/update link දෙකට ගියොත් command prompt එකේ user connected කියලා print වේවි.

දැන් අපි backend එකයි frontend එකයි setup කරගෙන ඉවරයි. ඊලඟට කරන්න තියෙන්නෙ. data enter කරන කොටසයි data display කරන කොටසයි හදන එක.

data enter කරන කොටස විදිහට update.html එකේ අන්තිම script එකේ var socket = io(); වෙනුවට පහල code එක දෙන්න.

$(function() {
 var socket = io();
 $('form').submit(function(ev) {
   ev.preventDefault();
   socket.emit('dataChange', $('#data').val());
   return false;
 });
});

මේකෙදි වෙන්නෙ මේකයි, මම update.html එකේ හදලා තියෙන form එක submit කරද්දි, ඒ කියන්නෙ Update button එක click කළාම, backend එකේ socket.io server එකට signal එකක් යනවා 'dataChange' කියලා. ඒ signal එකත් එක්ක මම enter කරපු value එකත් යනවා. ඒක තමයි ඔය socket.emit('dataChange', $('#data').val()); කියන line එකෙන් වෙන්නෙ.

ඊලඟට data display වෙන view.html file එකේ අන්තිම script එක ඇතුලෙ var socket = io(); වෙනුවට පහල code එක දෙන්න.

$(function() {
 var socket = io();
 socket.on('dataChange', function(msg) {
   $('#disp').text(msg.toString());
 });
});

මේකෙදි වෙන්නෙ backend එකෙන් 'dataChange' කියලා signal එකක් ආවොත්, ඒ signal එකත් එක්ක ආපු value (msg) එක මම view.html එකේ හදලා තියෙන <span id="disp"> කියන tag එක යටතෙ display වෙන එක. socket.on('dataChange', function(msg) {...} කියන line එකෙන් තමා ඒක වෙන්නෙ.

උඩ code දෙක පැහැදිලි කරද්දි මම කිව්වා වගේ update.html එකෙන් හැමතිස්සෙම data යන්නෙ server එකට, ඒ වගේම view.html එකට හැමතිස්සෙම data එන්නෙ server එකෙන්. ඊලඟට මම ලියන්න යන්නෙ server එකේ මේ data ගන්න සහ දෙන code එක. මේ code එක එන්න ඕනා, index.js file එකේ io.on('connection', function(socket) { ... }); ඇතුලට.

io.on('connection', function(socket) {
 socket.on('dataChange', function(msg) {
   io.emit('dataChange', msg);
 });
});

මේකෙදි වෙන්නෙ, server එකට dataChange කියලා signal එකක් ආවම ඒක අනිත් පැත්තට යවන එක. socket.on('dataChange', function(msg) { ... }); code එකෙන් වෙන්නෙ මේ එන signal අල්ලගන්න එක. io.emit('dataChange', msg); කියන්නෙ ආපු msg එක ආයෙ අනිත් පැත්තට dataChange signal එකක් විදිහට යවන්න කියන එක.

දැන් අපේ code එක සම්පූර්ණයි. ආයෙත් node index.js දීලා server එක start කරලා, http://localhost:4000 සහ http://localhost:4000/update link දෙකට ගිහින් update එකේ data enter කරලා submit කලොත් එවෙලෙම view එකේ data එක වෙනස් වෙනවා බලාගන්න පුළුවන්.

මං හිතනවා මේ tutorial එකෙන් socket.io ගැන පොඩි අදහසක් එන්න ඇති කියලා. තවත් socket.io ගැන ඉගෙන ගන්න [Only registered and activated users can see links Click here to register] site එකත් refer කරන්න. ප්‍රශ්නයක් තිබුනොත් අහන්න. (මම මේක ලිව්වෙ NodeJS ගැනත් යම් අත්දැකිමක් ලැබෙන විදිහට. ඒ නිසා NodeJS දන්න කෙනෙක්ට නම් මේක ටිකක් දිග වැඩිවෙන්න පුළුවන්).

මේකට අදාල මගේ code එක [Only registered and activated users can see links Click here to register] download කරගන්න පුළුවන්.

- 0xEDD1E
1
Reply
#3
(03-09-2019, 07:59 PM)0xEDD1E Wrote: [Only registered and activated users can see links Click here to register] site එකත් refer කරන්න. ප්‍රශ්නයක් තිබුනොත් අහන්න. (මම මේක ලිව්වෙ NodeJS ගැනත් යම් අත්දැකිමක් ලැබෙන විදිහට. ඒ නිසා NodeJS දන්න කෙනෙක්ට නම් මේක ටිකක් දිග වැඩිවෙන්න පුළුවන්).

මේකට අදාල මගේ code එක [Only registered and activated users can see links Click here to register] download කරගන්න පුළුවන්.

- 0xEDD1E

thnks a lot ayiya <3 love love love love
Regards,
Golden Dragon.
"There are 10 types of people in this world. Those that understand binary and those that don't. Tongue "
Reply
#4
TFS mCN
Reply




Users browsing this thread: 1 Guest(s)