מדריך פיתוח: שעון שמתעדכן בזמן אמת עם Node.js

הנה מדריך פיתוח קצרצר שילמד אתכם כיצד להציג בזמן-אמת את השעה הנוכחית, ללא רענון הדפדפן.

תמונה: flickr, cc-by, robstephaustralia

תמונה: flickr, cc-by, robstephaustralia

מטרת הניסוי

להציג בזמן-אמת את השעה הנוכחית, ללא רענון הדפדפן.

הציוד הדרוש

עורך טקסט, שרת Node.js.

רקע

מה זה Node.js?

טכנולוגיית צד-שרת, אשר מבוססת על מנוע ה-Javascript של גוגל V8.
השרת פועל על Thread אחד, כך שהפעולות בו מתבצעות בצורה אסניכרונית.


מהו התחביר (Syntax) לכתיבה ב-Node.js?

התחביר הוא Javascript, כאשר אובייקטים מה-DOM:
document, div… אינם נתמכים מן-הסתם.


מהו סדר הפעולות בקוד Node.js?

פעולה מתבצעת מבלי לחכות שהקודמת תסתיים אלא, בעת סיומה מתבצע Callback לפונקציה אחרת.

לדוגמה:

– נניח שפונקציה א’ יוצרת קובץ תמונה.
– נגדיר את פונקציה ב’ כ-Callback של א’. פונקציה זו תציג הודעה שהקובץ מוכן.
– סדר פעולות השרת:

1. הפעלת פונקציה א’.
2. המשך הפעלת שאר הפונקציות.
3. לאחר שפונקציה א’ תסתיים, הפעלת ב’.

סדר הפעולות האסינכרוני של Node.js הוא היתרון הגדול שלה.
מצד אחד, הוא מאפשר לאפליקציה להמשיך ולרוץ ללא עצירות.
מצד שני, תכונה זו מהווה חסרון כאשר האפליקציה צריכה לבצע פעולות שמכבידות על המעבד כמו: הוספת פילטרים לתמונה, קידוד וידאו או חישוב מתמטי מורכב.
לכן, מומלץ שלא להשתמש ב-Node.js לפעולות מהסוג הזה.


מה אפשר לבנות בעזרת Node.js?

יישומים אשר מנצלים את התכונות הנ”ל:
– צ’ט.
– קריאה/כתיבת קבצים.
– סטטיסטיקת זמן-אמת.


כיצד מקימים שרת Node.js?

הוראות התקנה כאן.


היכן מאחסנים שרת Node.js?

heroku הוא שירות Paas – Platform as a service מעולה, שהשתמשתי בו בדוגמה הנוכחית.


כיצד מריצים שרת Node.js?

במסוף (Terminal) נריץ את הפקודה:

[javascript]
$ node app.js
[/javascript]

שימו לב: לאחר כל שינוי בקוד, יש להפעיל מחדש את השרת!

מהלך הניסוי:

app.js


נטען את המודול שאחראי על תקשורת ה-HTTP

[javascript]
var http = require(‘http’);
[/javascript]


ניצור שרת HTTP. ה-Callback שלו יחזיר שני פרמטרים המייצגים את התקשורת איתו
1. “serverRequest”.
2. “serverResponse”.

[javascript]
var server = http.createServer(function(serverRequest, serverResponse) {

});
[/javascript]


נאזין לשרת בפורט 8080

[javascript]
var server = http.createServer(function(serverRequest, serverResponse) {

});
server.listen(8080);
[/javascript]


ניצור פונקציה שמחזירה את השעה העדכנית

[javascript]
function getCurrentTime(){
var currentDate = new Date();
var currentHours = addZeroToOneDigit(currentDate.getHours());
var currentMinutes = addZeroToOneDigit(currentDate.getMinutes());
var currentSeconds = addZeroToOneDigit(currentDate.getSeconds());
var currentTime = currentHours + ":" + currentMinutes + ":" + currentSeconds;
var html = parseHtml(currentTime);
return html;
}

function addZeroToOneDigit(digits){
var result = ((digits).toString().length === 1) ? "0" + digits : digits;
return result;
}

function parseHtml(currentTime){
var result = ‘<p style="direction: rtl; font: 12px Tahoma">’;
result += ‘השעה כרגע היא: ‘ + currentTime;
result += ‘.</p>’;
return result;
}
[/javascript]


ניצור משתנים לספירת השניות שעברו ונגביל אותן ל-20, כדי למנוע עומס.

[javascript]
var server = http.createServer(function(serverRequest, serverResponse) {
var currentTicks = 1;
var maximumTicks = 20;

});
[/javascript]


ניצור HEADER מסוג Content-Type של הגדרת הדף כ-HTML וקידוד שתומך בעברית.

[javascript]
var server = http.createServer(function(serverRequest, serverResponse) {

serverResponse.setHeader("Content-Type", "text/html; charset=utf-8");

});
[/javascript]


לסיום: ניצור טיימר בשרת, שבכל שנייה מחזיר תשובה לדפדפן עם השעה הנוכחית.
תוך כדי, נבדוק שמספר הקריאות לא עובר את המקסימום שהגדרנו (20 קריאות).

[javascript]
var server = http.createServer(function(serverRequest, serverResponse) {

var currentTime = "";
var interval = setInterval(function(){
if (currentTicks <= maximumTicks){
currentTime = getCurrentTime();
serverResponse.write(currentTime);
currentTicks++;
}
else{
clearInterval(interval);
serverResponse.end();
}
}, 1000);
});
[/javascript]

תוצאות הניסוי

הריצו את שעון ארה”ב, ללא רענון הדפדפן כפי שעשינו בעבר.
(להזכירכם, הגבלנו את השעון לספירה של 20 שניות כדי למנוע עומס):
http://pacific-lowlands-5167.herokuapp.com


פורסם לראשונה בבלוג קוד נקי.

שי מסיסטרנו

מפתח ווב מאז 2007, בעברו מרצה במכללת Ness מ-2009 עד 2012.

הגב

6 תגובות על "מדריך פיתוח: שעון שמתעדכן בזמן אמת עם Node.js"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

* היי, אנחנו אוהבים תגובות!
תיקונים, תגובות קוטלות וכמובן תגובות מפרגנות - בכיף.
חופש הביטוי הוא ערך עליון, אבל לא נוכל להשלים עם תגובות שכוללות הסתה, הוצאת דיבה, תגובות שכוללות מידע המפר את תנאי השימוש של Geektime, תגובות שחורגות מהטעם הטוב ותגובות שהן בניגוד לדין. תגובות כאלו יימחקו מייד.

סידור לפי:   חדש | ישן | הכי מדורגים
תחכמוני
Guest

“השרת פועל על Thread אחד, כך שהפעולות בו מתבצעות בצורה אסניכרונית אחת-אחר-השנייה.”

seriously?

TJ
Guest

אתה מציע כאן פרקטיס כל כך גרוע ולא שימושי שאי אפשר אפילו להתחיל לתאר. אילו רצית לכתוב מדריך שימושי, היית מדגים ביצוע של שעון באמצעות socket.io, למשל. לכתוב לצורך הכתיבה, או לפרסם מאמר לצורך הפרסום (newgeek), בשניהם יש טעם רציני לפגם.

שומבצל
Guest

אני מעריך את הכתיבה אבל לא מבין מה יש כאן שAJAX לא עושה.
אני מפספס משהו?

חנן
Guest

בעניין שליפת הזמן אולי אתה צודק שאין הבדל משמועתי אבל לגבי צ’אט לדוגמא AJAX יצור עומס ואפילו יגרום לקריסת השרת ולכן שיטת הסוקטים יותר יעילה לדברים כאלה.
ד”א לכותב המאמר אשמח לראות מדריך מצולם בוידאו על התקנת הNODEJS ודוגמא של בניית צ’אט ע”י NODEJS אני חושב שהרבה היו רוצים לראות מדריך כזה.

מוטי
Guest

שאלות ותשובות בנושא גאווה סקריפט ניתן לשאלה ב http://tshuva2sheela.com/tag/javascript

wpDiscuz

תגיות לכתבה: