180518 ntut js and node

JavaScript 與 Node.js
Peter 易弼仁

2
└ JavaScript
└ 變數
└ 陣列
└ 函式
└ 物件
└ 條件與迴圈
└ Node.js
└ 生態系
└ 基礎練習
└ Callback
└ 建構式
└ 繼承
└ 模組化
└ 事件發射器
課程綱要
└ 第三方模組
└ npm
└ lodash
└ 伺服器
└ http server
└ socket.io
└ 即時聊天室
投影片位置：SlideShare – ntut js and node

3
└ 確認系統已經安裝好 Node.js
開始之前
安裝教學：https://nodejs.org/en/

5
JavaScript
和 Java 是不同的語言
不是只能用在前端網頁上
適合物件導向、函式導向設計
高階、動態、無型別的直譯語言

6
變數
規則
└ 第一個字元不可是數字
└ 只能是字母、底線和錢字號
└ 不可為關鍵字
└ 如 If、for、this 等等
└ 區分大小寫
└ myname、MYNAME 為不同變數
└ 慣例使用小駝峰命名
└ 如 myName、mySchool
└ 無型別
└ 以逗號分隔多個變數
關鍵字
└ var
└ let
└ 只有在 let 宣告的範疇中有效
└ 沒有變數提升 (hoisting)
└ const
└ 用來宣告常數
└ 宣告時需指定值
└ 沒有變數提升 (hoisting)
// 正確
var myName;
var _func;
var $i;
// 錯誤
var 01x;
var @test;
var #dash;
var a = 10,
b = 'test';

7
變數範疇
一個變數的範疇 (scope) 是指程式碼中該變數有定義的區域
└ JavaScript 有兩種變數範疇：全域變數和區域變數
└ 區域變數的優先序比同名稱的全域變數高
└ 使用 var 在函式內宣告的變數為區域變數
└ 使用 let 在函式、for 區塊、if 區塊、或純區塊內宣告的變數為區域變數
var scope = 'global';
function checkScope() {
var scope = 'local’;
console.log(scope); // local
}
checkScope();
console.log(scope); // global
let x = 1;
if (true) {
let x = 2;
console.log(x); // 2
}
var x = 1;
if (true) {
var x = 2;
}

8
變數提升
console.log(a);
var a = 10;
console.log(a);
undefined
10
變數宣告會被提升 (hoisting) 到該範疇的最上方
└ 變數初值設定的位置不變
└ let 和 const 沒有變數提升
console.log(a);
let a = 10;
ReferenceError: a is not defined
console.log(a);
const a = 10;
ReferenceError: a is not defined

9
物件是一堆名稱與值的組合
└ 資料與行為的封裝
└ 擬人化、擬物化
└ 物件擁有紀錄資料與行為的屬性
└ 每個屬性就是一對名稱與值
└ 屬性值可以是任意 JavaScript 的值
└ 若值為函式，我們稱它為物件的方法 (method)
└ JavaScript 中所有東西都是物件
└ 不論是數字、字串、陣列、函式等等
物件
var person = {};
person.name = 'Jack';
person['age'] = 26;
var person = {
name: 'Jack',
age: 26,
friends: ['Hedy', 'Peter', 'Simen'],
parents: {
father: 'Eric’,
mother: 'Ann'
},
speak: function (text) {
console.log(text);
}
};
var person = {
name: 'Jack',
age: 26
};

10
一個陣列是一組值的有序群集
└ 其中的值稱為元素 (element)
└ 元素的位置稱為索引 (index)
└ 第一個元素的索引為 0
└ 陣列中不同元素可以是不同型別
└ 只支援一維陣列
└ 但可以在陣列放入陣列來實現二維陣列
└ 每個陣列都有 length (長度) 屬性
陣列
var num = [1, 3, 7, 9, 21, 43];
var name = ['Simen', 'Hedy', 'Peter'];
console.log(num.length); // 6
console.log(name.length); // 3
var array = ['Hello', ' World', '!'];
console.log(array[0] + array[1] + array[2]);
array[1] = ' JavaScript';
console.log(array[0] + array[1] + array[2]);
Hello World!
Hello JavaScript!
var array = [[‘x1’, ‘x2’], [‘y1’, ‘y2’]];
console.log(array[0][1]); // x2

11
函式是一段程式碼，可被多次執行
└ 使用關鍵字 function 來定義
└ 未定義名稱的函式為匿名函式
└ 函式有兩種定義的方式
└ 函式宣告式與函式運算式
└ 函式宣告會被提升 (hoisted)
└ 函式也是一個物件
函式
function add (x, y) {
return x + y;
}
var sum = add(2, 3);
console.log(sum);
var greet = function (name) {
console.log('Hello ' + name + '!');
}
greet('Simen');
function greet (name) {
console.log('Hello ' + name + '!');
}
greet('Simen');
(function (name) {
console.log('Hello ' + name + '!’);
}('Simen'));

13
If 是條件判斷最基本的語法
└ 條件必須是 Boolean 值或運算式
└ 若是其他值，則會被自動轉型為 Boolean 值
└ 用 else if 來判斷多個條件
└ else if 數量沒有限制
└ 用 else 處理條件不符合的情況
└ 判斷式是由上到下循序執行
└ 當一個條件成立時，後面的條件不再繼續判斷
If
if (條件) {
條件為 true 時執行此程式
}
if (條件1) {
條件1為 true 時執行此程式
} else if (條件2) {
條件1不為 true，但條件2為 true 時執行此程式
} else {
條件皆不為 true 時執行此程式
}
function description(height) {
if (height < 165) {
console.log('矮');
} else if (height >= 165 && height < 175) {
console.log('平均');
} else {
console.log('高');
}
}
description(173); // '平均'

14
判斷不同情況下執行不同的程式碼
└ 查對條件與標籤
└ 用 break 跳出 switch
└ 可以用 return 取代
└ 用 default 定義沒有相符的標籤時執
行的程式碼
switch
switch(條件) {
case 標籤:
如果條件 === 標籤時執行此程式
break;
default:
若沒有與條件相符的標籤時執行此程式
}
function isTodayWeekend() {
var day = new Date().getDay();
switch(day) {
case 6:
console.log('Today is Saturday’);
break;
case 0:
console.log('Today is Sunday');
break;
default:
console.log('Today is not weekend');
}
isTodayWeekend(); // 'Today is not weekend'

15
while 是迴圈最基本的語法
└ 可用來創建無窮迴圈
└ do / while 在迴圈底部才判斷條件
└ 也就是說本體程式碼至少會被執行一次
└ do 迴圈結尾一定要分號
while
while (條件) {
條件為 true 時執行程式，並重複迴圈。
}
var a = 0;
while (a < 5) {
console.log(a);
a++; // a = a + 1
}
do {
執行此程式後判斷條件，若條件為 true 時重複迴圈。
} while (條件);
var b = 0;
do {
console.log(b);
b++;
} while (b < 5);

16
for 迴圈經常比 while 來得便利
└ 簡化某種共通形式的迴圈
└ 初始化、條件判斷、更新
└ 任一個都可以省略
└ 但兩個分號不可省略
for
for (初始化; 條件判斷; 更新) {
條件為 true 時執行程式，並重複迴圈
}
var sum;
for (var i = 0; i < 5; i ++) {
sum = sum + i;
}
console.log(sum); // 10

18
Node.js 將 JavaScript 推向另一個境界！
└ Real-time Web Server
└ 單執行緒
└ 事件驅動架構
└ 非同步式 I/O
Node.js
Node.js Core
Node.js Bindings (C++)
Google V8 (C++) libuv
JavaScript Engine Cross-platform Async I/O

19
└ 套件管理系統與蓬勃發展的生態系
Node.js 生態系
Node.js Native Modules 3rd-party Modules
http stream events
buffer process …
express lodash q
async mocha …
Our Node.js Application
http … express lodash async …
npm install <module>
npm is not only a node package manager!

20
基礎練習
└ (01) 用 console.log() 印出 Hello World!
└ (02) 宣告一個變數 x，並其為字串 “Hello World!”，然後印出 x
條件與迴圈
└ (03) 使用 while 迴圈印出 10 次 Hello World!
└ (04) 使用 for 迴圈印出 10 次 Hello World!
└ (05) 在 for 迴圈中，當執行第 i 次且 i 是奇數才印出 “Hello World!” (使用 if )
從 Hello World 開始
3 mins
5 mins

21
你可以偷看一下
console.log('Hello World!');
var x = 'Hello World!';
console.log(x);
for (var i = 0; i < 10; i++) {
}
var i = 0;
while (i < 10) {
i++;
}
for (var i = 0; i < 10; i++) {
if ((i%2) !== 0)
}
01
02
04
03
05

22
函式
└ (06) 將打印 Hello World! 包裝成一支函式 hello()，然後呼叫它
物件
└ (07) 建立一個代表人 (person) 物件，該物件要包含有 name、gender 和 age 屬性，
並且印出 person 物件與其中的屬性 name
└ (08) 呈上，在人的物件中，加入方法 speak()，這個方法會傳入一個參數 text，並且
它會印出傳入的參數
來練習函式和物件
2 mins
5 mins

23
function hello() {
}
hello();
06
var person = {
name: 'John',
gender: 'man',
age: 20
};
console.log(person);
console.log(person.name);
07
var person = {
name: 'John',
gender: 'man',
age: 20,
speak: function (text) {
console.log(text);
}
};
person.speak('Hi Hi~');
08

24
Callback
└ 回呼函式、回調函式
└ 當呼叫一個函式 a 時，給他另一個函式 b；
當某種條件成立時，就回過頭呼叫函式 b
練習一下
└ (09) 寫一支函式 repeatHello(times, callback)，然後試著呼叫它來執行 10 次 hello()；這裡的
callback 應該放誰呢？
什麼是 Callback
function a (x, y, callback) {
// ... do something
callback();
}
function b () {
// I am a function
}
a('hello', 88, b);
4 mins

25
function hello() {
}
function repeatHello(times, callback) {
for (var i = 0; i < times; i++) {
callback();
}
}
repeatHello(10, hello);
09

26
建構式
└ 建立類別
└ 根據類別建立新的物件實例
└ 與 new 運算子一起使用
└ 名稱字首大寫
└ 原型：prototype
└ JavaScript 中所有物件都具有 prototype
└ Object.prototype、Array.prototype、
Function.prototype
└ 每 new 一個新的物件實例時，所有屬性都會被
new 一份出來，但原型就不會，因為是「繼承」
的概念！
建構式
Class: Person
Name
Age
Gender
Object: Peter
Name: Peter
Age: 24
Gender: men
Object: Simen
Name: Simen
Age: 36
Gender: men
Object: Hedy
Name: Hedy
Age: 23
Gender: women
function Person(name) {
this.name = name;
}
Person.prototype.hello = function () {};
var john = new Person('John');

27
this
└ 會指向調用函數的物件實例
└ 在不同的場合使用它所指向的對象會不同
└ 一般函式：根據是否為嚴格模式有所差異，在稀鬆模式中
this 會參考到全域物件；在嚴格模式中 this 為 undefined
└ 建構式：this 參考到實例
└ 方法：this 參考到調用該方法的物件
this
var savedThis;
function Constr() {
savedThis = this;
}
var inst = new Constr();
console.log(savedThis === inst);
// true
var obj = {
method: function () {
console.log(this === obj);
// true
}
}
obj.method();
'use strict';
console.log(this);
// undefined
1
2
3
1
2
3

28
建構式
└ (10) 建立一個 Person 建構式
└ 屬性：name, age, gender
└ 方法：hello
└ hello 方法會印出 “Hello, I am xxx.”
└ xxx 為新增實例時傳入的名字
└ 新增一個 Person 的實例
練習一下
5 mins function Person(name, gender, age) {
this.name = name;
this.gender = gender;
this.age = age;
}
Person.prototype.hello = function () {
console.log("Hello, I am " + this.name + ".");
};
var john = new Person('John', 'man', 20);
console.log(john);
john.hello();
10

29
建構式
└ (11) 建立一個 Student 的建構式
└ 屬性：name, age, gender, school
└ 方法：hello, greet
└ greet 方法會印出 “Hello, I am xxx.” 和
“A student from ooo”
└ xxx 為新增實例時傳入的名字
└ ooo 為新增實例時傳入的學校
└ 新增一個 Student 的實例
練習一下
function Student(name, gender, age, school) {
this.name = name;
this.age = age;
this.school = school;
}
Student.prototype.hello = function () {
};
Student.prototype.greet = function () {
console.log("Hello, I am " + this.name + “.");
console.log("A student from " + this.school + “.");
};
var john = new Student('John', 'man', 20, 'NTU');
console.log(john);
john.hello();
john.greet();
115 mins

30
繼承另一個物件的屬性與方法
└ 實現物件原型繼承的函式 util.inherits()
└ util.inherits(A, B) 是把 B.prototype 複製到 A 身上
└ 使用 call() 繼承屬性
└ 讓父建構式用子建構式的 this 來執行初始化
└ call() 是 Function.prototype 中的方法
練習一下
└ (12) 使用 util.inherits() 讓 Student 繼承自 Person
└ 屬性：school
└ 方法：greet
重寫好麻煩：繼承
8 mins
function Student(name, school) {
Person.call(this, name);
}
util.inherits(Student, Person);
var john = new Student('John', 'NTUT');
function Person(name) {
this.name = name;
}
Person.prototype.hello = function () {};

31
var util = require('util');
// Class: Person
function Person(name, gender, age) {
this.name = name;
this.age = age;
}
};
// Class: Student
Person.call(this, name, gender, age);
}
console.log("Hello, I am " + this.name + “.");
console.log("A student from " + this.school);
};
var john = new Student('John', 'man', 20, 'NTUT');
john.hello();
john.greet();
12


這個程式寫完後，請試著單獨拿掉 ，執行看看結果如何。然後，
試著單獨拿掉  再看看結果如何。如果有異狀，想想看為什麼？
引用 Node.js 原生模組 util

32
模組是 Node.js 的重要支柱
└ 將程式拆分、封裝
└ 第三方模組
└ require() 載入模組
└ module.exports 公開模組介面
└ module.exports 初始值是一個物件
└ exports 也可以公開模組介面，但要注意他是
module.exports 初始值的參考
練習一下
└ (13) 讓 Person 成為一個模組，讓 Student 引用
模組系統
5 mins
var name = 'peter'
function hello() {
console.log("Hello, I am " + name + ".");
}
module.exports = hello;
var hello = require(‘./hello’);
hello();
var name = 'peter'
exports.hello = function () {
console.log("Hello, I am " + name + ".");
}
var obj = require(‘./hello’);
obj.hello();

33
// Class: Person
function Person(name, gender, age) {
this.name = name;
this.age = age;
}
};
module.exports = Person;
var Person = require('./13_Person');
// Class: Student
// 略
}
// 略
};
var john = new Student('John', 'man', 20, 'NTU’);
console.log(john);
john.hello();
john.greet();
13
匯出 Person 建構子
匯入 Person 建構子

34
event 是 Node.js 最重要的模組
└ Node.js 是事件驅動式，而 events 物件提供唯一的介面
└ events 只提供了一個建構式：EventEmitter
└ 大多時候我們會讓物件繼承它，而不是直接使用
└ EventEmitter 提供事件發射與事件監聽器功能
└ .emit() 發射事件
└ .on() 新增事件監聽器
練習一下
└ (14) 新增一個 NewEmitter 建構式，並讓該建構式繼承事件發射器
└ 新增一個 newEmitter 實例
└ 試著每 3 秒引發事件 'show_me'，然後在監聽器中印出 Hello World!
事件發射器
5 mins
emitter.on('greet', function(name) {
console.log('Hello ' + name + ".");
});
emitter.emit('greet’, 'peter’);

35
var EventEmitter = require('events').EventEmitter;
function NewEmitter() {}
util.inherits(NewEmitter, EventEmitter);
var newEmitter = new NewEmitter();
newEmitter.on('show_me', function() {
});
setInterval(function () {
newEmitter.emit('show_me');
}, 3000);
16

37
Git 是一套分散式版本管理系統
└ 支援本地操作、備份容易
└ 功能強大且具彈性的分支與合併
Github 是軟體原始碼代管服務
└ 世界上最大的程式碼存放網站和開源社群
└ 個人和組織建立和存取保管中的程式碼
└ 共同軟體開發功能
└ 完整的 Git 版控支援
開源無所不在
GitHub

38
Node.js 強大靈活的套件管理員
└ 目前已有上萬個協力廠商模組
└ 一行指令就能安裝別人寫好的模組
└ 安裝指令：npm install <package name>
└ 模組被安裝到 node_modules 目錄
└ 安裝前 npm 會先檢查目錄中是否已存在指定模組
└ 安裝 Node.js 會連帶安裝 npm
Node Package Manager
npm

39
└ npm init
└ 初始化專案資訊
└ 產生 package.json
└ npm install <package name>
└ 安裝指定套件到 node_module 目錄
└ npm 會先檢查當下的 node_module 目錄
└ npm install <package name> -save
└ 安裝指定套件到 node_module 目錄
└ 並將該模組與其版本寫入 package.json
└ npm install <package name> -g
└ 安裝指定套件到全域目錄
npm 常用指令
└ npm install
└ 根據 package.json 安裝專案所需的相依套件
└ npm update <package name>
└ 更新專案中的指定模組
└ npm update
└ 更新專案中的所有模組

40
package.json 定義模組的相依套件及資訊
└ npm install 指令根據它自動下載相依模組
└ 欄位簡述
└ name：模組名稱
└ version：模組版本號
└ decription：模組的簡短描述
└ main：程式進入點
└ script：腳本指令
└ dependencies：模組所依賴的第三方模組清單
└ devDependencies：模組在開發階段所依賴的第三方模組清單
└ keywords：模組關鍵字
└ author：模組作者
└ license：模組版權
package.json
{
"name": "npm-example",
"version": "0.0.1",
"decription": "Experiment",
"main": "index.js",
"dependencies": {
"request": "0.1.0"
},
"devDependencies": {
"mocha": "2.1.0"
},
"script": {
"start": "node index.js"
},
"keywords": [
"example"
],
"author": "PeterEB",
"license": "MIT"
}

41
一個 JavaScript 實用的工具模組
└ 提供像 Function、Array、Object 原生物件的方法
└ 讓程式碼更佳的簡潔及好維護
└ 效能比原生物件的方法好
└ Underscore 的強化版
lodash
文檔
var _ = require('lodash');
_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });
// { 'a': 1, 'b': 2 }
_.partition([1, 2, 3, 4], n => n % 2);
// [[1, 3], [2, 4]]
_.toLower('PETER');
// peter

42
練習一下
└ (17) 新增一個專案，並安裝 lodash
└ (18) 建立一個陣列中放入數字 1 – 10，接著找出數字 5 的索引 (index)
└ _.indexOf(array, value, [fromIndex = 0])
└ (19) 建立一個 person 物件，接著將各個屬性名稱與屬性值分別印出
└ 包含 name、gender、age 屬性
└ 分別印出 “name: xxx”、“gender: xxx”、“age: xxx”
└ _.forEach(collection, iteratee)
└ iteratee: function (value, key)
練習一下

43
$ npm init
17
example$ npm install lodash
var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(_.indexOf(num, 5));
18
var person = {
name: 'John',
gender: 'man',
age: 26
};
_.forEach(person, function(value, key) {
console.log(key + ': ' + value);
});
19

45
Node.js 原生的 HTTP 模組
└ 建立 HTTP 伺服器
└ 接收請求、回應請求
└ res.writeHead()、res.write()、res.end()
└ 發送請求
http
var http = require("http");
http.createServer(function(req, res) {
res.writeHead(200, {"Content-Type": "text/html"});
res.write("<h1>Node.js</h1>");
res.end("<p>Hello World! I'm built by Node.js</p>");
}).listen(3000);
console.log("HTTP Server is listening at port 3000."); 文檔

46
練習一下
└ (20) 建立一個 HTTP 伺服器，監聽連接埠 80
└ 瀏覽器訪問時會回傳 Hello World!
└ http.createServer(handler(req, res))
└ res.end()
練習一下
var http = require("http");
http.createServer(function(req, res) {
res.end(“Hello World!");
}).listen(80);
console.log("HTTP Server is listening at port 80.");
20

47
讓客戶端與伺服器進行互動通訊的技術
└ 在單個 TCP 連線上進行全雙工通訊
└ HTML5 定義了 WebSocket 協定
└ 使客戶端與伺服器間資料交換變得更加簡單
└ 客戶端與伺服器只須完成一次交握，便能建立持續性連線
└ 交握採用 HTTP 協定，並且只需再交握時攜帶狀態資訊，之後的通訊可省略部分狀態資訊
└ 伺服器能主動向用戶推播資料
└ 不需要對資料更改進行輪詢
└ 使客戶端反應更即時
└ 可用來建立 Real-time Web
WebSockets

48
Socket.io 是 WebSockets 更高一層的抽象層模組
└ 提供易用的伺服器端與客戶端模組
└ socket.io 與 socket.io-client
└ 支援 Flash、XHR、JSONP 等
└ 在某些瀏覽器不支援 WebSocket 的狀況下，則會自動改用其他的方式來傳輸
└ 大部分的操作都是透過監聽與發射事件
Socket.io
// Server API: io(httpServer[, oprions])
io(server);
io.on('connection', function(socket){
// a new user connected
socket.emit('message’, {data: 'Hello World!'});
});
// Client API: io([url][, oprions])
// url defaults to window.location
var socket = io('http://localhost:3000’);
socket.on('message', function(data){
console.log(data.msg);
// Hello World!
});
Server Client

49
練習一下
└ (21) 建立一個 Socket.io 的伺服器端與客戶端
└ 使用 npm 安裝 socket.io 和 socket.io-client
└ 當客戶端連線成功時，伺服器端會發送歡迎訊息 (Hello World!)
練習一下
var server = require('http').createServer();
var io = require('socket.io')(server);
console.log('a new user connected');
socket.emit('message', { msg: 'Hello World!' });
});
server.listen(3000, function(){
console.log('listening on *: 3000');
});
var io = require('socket.io-client');
var socket = io('http://localhost:3000');
socket.on('message', function(data){
console.log(data.msg);
});
Server Client
21

50
即時聊天室
HTTP Request
(via HTTP)
訪問網頁

51
即時聊天室
‘Hello!’
(via Socket.io)
Hello! Hello!
Hello!
即時聊天
Hello!

52
HTML 是一種用於描述網頁結構與內容的標準標示語言
└ 一個標準的 HTML 檔案其實就是一個網頁
└ 以各個元素來組成一個網頁
└ 元素是由標籤以及內容所構成
└ 一個標籤是由一對小於和大於符號 < > 所組成
└ 並在其中放入元素名稱
└ 一個元素一般會有起始標籤與結束標籤
└ 結束標籤會在元素名稱前，多加上一個斜線 /
└ 一個標準的 HTML 網頁包含以下元素
└ 文件類型、html 元素、head 元素、body 元素和 title 元素
網頁基本架構
<!doctype html>
<html>
<head>
<title>Title</title>
</head>
<body>
</body>
</html>

53
實作基礎頁面
<!doctype html>
<html>
<head>
<title>Socket.io chat</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
└ (1) 建立一個 html 檔，並且在其中用 h1 元素印出 Hello Wrold!
└ h1 元素為標題元素
└ 直接開始 html 檔即可看到網頁
1

54
└ (2) 建立 HTTP 伺服器
└ 收到請求時，回傳 html 網頁
└ 使用 fs 模組讀取網頁
└ node.js 內建的核心模組
└ fs.readFile(path, callback);
└ 檔案讀取完成後，會傳入 callback
的第二個參數 data
└ 將網頁內容以 utf8 格式傳出
伺服器端
var fs = require('fs');
var server = require('http').createServer(handler);
function handler(req, res) {
fs.readFile(__dirname + '/index.html', function(err, data) {
if (err){
res.writeHead(404);
res.end("opps this doesn't exist - 404");
} else {
res.writeHead(200, {"Content-Type": "text/html"});
res.end(data, "utf8");
}
});
}
});
2

55
└ (3) 加入 Socket.io server
└ 當 client 對 server 發送聊天訊息時，
將該訊息轉傳給其他所有的 client
└ 當有新的 client 加入時，監聽它的
‘chat message’ 事件
└ 當有 client 發送 ‘chat message’ 事件時，
調用 io.emit 來轉傳給所有 client
Socket.io Server
var fs = require('fs');
var server = require('http').createServer(handler);
var io = require('socket.io')(server);
function handler(req, res) {
[...]
}
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
});
3

56
聊天室網頁
<!doctype html>
<html>
<head>
<title>Socket.io chat</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form>
<input id="m"/><button>Send</button>
</form>
</body>
</html>
4
└ (4) 修改 html 網頁，加入聊天內容、輸入框和發送按鈕
└ 使用 script 元素引入 socket.io 和 jquery 模組的 CDN
└ 聊天內容用 ul 項目清單元素呈現，並且給它一個 id message
└ 輸入框和發送按鈕是一對的，因此我們使用 form 表單元素，並在其中加入 input 元素和
button 元素，並給 input 元素一個 id m

57
Socket.io Client
<!doctype html>
<html>
<head>
[...]
</head>
<body>
[...]
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
5
└ (5) 完成 Socket.io client
└ 使用 script 標籤來讓我們能在網頁中
插入 JavaScript 程式碼
└ 在程式碼中建立一個 socket.io client
└ 用 $( ) 取得網頁元素
└ # 代表透過 id 取得元素
└ 當發送按鈕被按下時，client 送出
chat message 事件，並將內容一併
傳給 server
└ client 監聽 chat message 事件，當
事件發生時，代表有人發送新的聊天
訊息，因此我們拿這個聊天訊息來在
ul 項目清單元素中加入新的 li 項目元
素

180518 ntut js and node

More Related Content

What's hot (20)

Similar to 180518 ntut js and node (20)

180518 ntut js and node

Editor's Notes