Node.js 工作坊

文章目錄

1. 環境
2. 請求資料
3. Hello World
4. Callback 基本觀念
5. 連線聊天實做
6. 實做使用者列表
7. 發悄悄話給某人
8. 完整的code

第六屆黑客松的Node.js Workshop 筆記，目的是做出聊天室後端。

環境

重點放在後端所以講師有先弄好一個聊天室前端
做好的聊天室伺服器可以放在 cloud9 可以在雲端編輯、執行server
或是直接localhost跑 (推薦，因為這邊網路很爛把node.js裝好、聊天室前端 zip 下載下來、裝好 socket.io 就不用網路了)

先裝好 Node.js
開一個資料夾
進去以後

$ npm init

然後就會問你一些專案設定的東西，這邊就先一直 Enter

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (nodeWorkshop)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/yucing617/Documents/nodeWorkshop/package.json:

{
  "name": "nodeWorkshop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

OK以後再來安裝 socket.io

$ npm install socket.io --save

請求資料

server 和 client 溝通

polling 輪詢

ㄟ你有沒有話要跟我說
ㄟ你有沒有話要跟我說
ㄟ你有沒有話要跟我說
ㄟ你有沒有話要跟我說

long polling 長輪詢

ㄟ你有沒有話要跟我說
…
…
…
會等一陣子，不要求馬上回應
（像是facebook 某些服務一次等10秒）

WebSocket

在 server 或 client 建立一個穩定的連線，有訊息可以馬上告訴對方，減少不斷問的成本，反應速度更快。

Hello World

在專案裡面開一個 server.js

var socketio = require('socket.io');
var io = socketio(7000);

執行 server，指令下完以後會看起來卡住，正常，代表 server 在跑了。

$ node server.js

把下載下來的前端 index.html 直接點兩下打開
Server: 的地方填入 http://127.0.0.1:7000 按下連線

下面看到已連線就代表成功了。

Callback 基本觀念

等LOL讀取的時候會先去滑手機，不會卡在那邊讀取

等LOL讀取(function(){
    殺敵
})

滑手機()

像是下面這樣，ha ha ha 會先跑出來。

setTimeout(function(){
    console.log('hello World');
}, 2000);

console.log('ha ha ha');

連線聊天實做

當有人連線進來時顯示訊息

var socketio = require('socket.io');

var io = socketio(7000);

io.on('connection', function(someone){
    console.log('someone here', someone.id);
});

當有人傳訊息時可以用emit()送訊息出來，就可以看到聊天室有訊息了。

var socketio = require('socket.io');

// 啟動socket.io server 這個server叫做io
var io = socketio(7000);

// socket.io 事件 每調薪連線進來時會做事件綁定
io.on('connection', function(someone){
    console.log('someone here', someone.id);

    // message是自訂的 收到訊息時的事件 然後發送給所有人
    someone.on('message', function(form, msg){
        // 有人送訊息時 用io這個伺服器把訊息送出去
        // emit是送訊息的動作
        io.emit('message', form, msg);

    });
});

實做使用者列表

當有人連線或離現時更新使用者列表
上面要加一個userList記錄所有使用者

var userList = {};

下面這些要寫在 io.on('connection', function(someone) 裡面：

// 使用者上線通知
    someone.on('user_in', function(nickname){
        userList[someone.id] = nickname;
        io.emit('user_list', userList);
    })

    // 使用者離線通知
    someone.on('disconnect', function(nickname){
        delete userList[someone.id];
        io.emit('user_list', userList);
    })

發悄悄話給某人

上面要加一個clients記錄所有client(連線物件)

var clients = {};

因為我們多記錄了client，所以登入和離線的地方也要改，有人連線要紀錄他的連線物件，有人離線要多刪除一個client

// 使用者上線通知
someone.on('user_in', function(nickname){
    userList[someone.id] = nickname;
    clients[someone.id] = someone;
    io.emit('user_list', userList);
})

// 使用者離線通知
someone.on('disconnect', function(nickname){
    delete userList[someone.id];
    delete clients[someone.id];
    io.emit('user_list', userList);
})

主要的功能寫在 io.on('connection', function(someone) 裡面：

// 發悄悄話給某人
someone.on('private message', function(form, sendToId, msg){
    // 不能用io.emit()了 因為會送給io伺服器上所有人
    // 要改成送給client[]裡面的某人，從sendToId來選人
    clients[sendToId].emit('private message', form, msg);
});

完成以後就可以開三個網頁用不同 nickname 用悄悄話看看了。

完整的code

var socketio = require('socket.io');

// 啟動socket.io server 這個server叫做io
var io = socketio(7000);

var clients = {};
var userList = {};

// socket.io 事件 每調薪連線進來時會做事件綁定
io.on('connection', function(someone){
    console.log('someone here', someone.id);

    // 使用者上線通知
    someone.on('user_in', function(nickname){
        userList[someone.id] = nickname;
        clients[someone.id] = someone;
        io.emit('user_list', userList);
    })

    // 使用者離線通知
    someone.on('disconnect', function(nickname){
        delete userList[someone.id];
        delete clients[someone.id];
        io.emit('user_list', userList);
    })


    // message是自訂的 收到訊息時的事件 然後發送給所有人
    someone.on('message', function(form, msg){
        // 有人送訊息時 用io這個伺服器把訊息送出去
        // emit是送訊息的動作
        io.emit('message', form, msg);

    });

    // 發悄悄話給某人
    someone.on('private message', function(form, sendToId, msg){
        // 不能用io.emit()了 因為會送給io伺服器上所有人
        // 要改成送給clients[]裡面的某人，從sendToId來選人
        clients[sendToId].emit('private message', form, msg);
    });
});