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

1. כך זה נראה

קוד צד שרת מינימליסטי של socket.io ישמש בתור מפיץ הודעות: כל פעם שלקוח שולח הודעה פשוט נפיץ אותה לכל הלקוחות האחרים. הנה הקוד.

var io = require('socket.io')();
io.on('connection', function(socket){

  socket.on('data', function(data) {
    io.sockets.emit('data', data);
  });
});

var port = process.env.PORT || 3100;

io.listen(port);

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

2. תיבת עריכת טקסט משותפת

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

3. צ׳ט מרובה משתתפים

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

4. ומה לגבי הודעות ישנות?

אחת הבעיות שכבר אפשר לראות ביישום היא שאין שמירה של תוכן ישן. לפעמים זה נוח אבל הרבה פעמים היינו רוצים שיהיה איזשהו מצב התחלתי שכולם יהיו מסונכרנים עליו - למשל עבור יישום הצ׳ט אפשר בהחלט לצפות שמי שנכנס קצת באיחור לחדר יוכל לראות הודעות ישנות.

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

var io = require('socket.io')();
var backlog = [];

io.on('connection', function(socket){
  socket.emit('backlog', backlog);

  socket.on('data', function(data) {
    backlog.push(data);
    io.sockets.emit('data', data);
  });
});

var port = process.env.PORT || 3100;

io.listen(port);