WebSocket:
為一個從HTML5中開始的一個協定, 瀏覽器和伺服器之間只需要一個handshaking動作就形成了一條快速通道. 兩者之間可以直接互相傳送資料.
這種方式可以避免無謂的浪費伺服器頻寬和資源(舊式的是一段時間後再發一次request.)
Socket.io
一般的http協定不支援長久的連接, 需要不斷地發送request給server更新資料. 而Socket.io可以達到 server 和 client 的雙向溝通, 只要一建立連線 server 可以一直傳訊息給 client.
ChatRoom Example
1.新增Chatroom資料夾並新增package.json
首先新增一個Chatroom的資料夾, 並執行以下指令安裝相關套件.
{
"name": "socket-chat-example",
"version": "0.0.1",
"description": "my first socket.io app",
"dependencies": {}
}2.安裝express & Socket.io
$npm install --save express
$npm install --save socket.io3.新增index.js
第一行: 建立一個express module的app function.
第二行: 建立 http 物件
第三行(app.get…): 處理 / (根目錄) 的 URL GET 要求
sendFile為傳輸檔案, 在這裡傳的是
index.js所在資料夾底下的index.html檔
__dirname: 返回被執行的.js檔所在資料夾的絕對路徑
最後則是監聽PORT:3000
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
http.listen(3000, function(){
console.log('listening on *:3000');
});4.建立Socket.io
首先導入Socket.io模組, 因 Socket.io 依賴 HTTP 所以這裡採用一併引入的方式.
socket.io 的核心函數：
emit ：用來發射一個事件或者說觸發一個事件, 第一個參數為事件名，第二個參數為要發送的數據, 第三個參數為callback function.
on ：用來監聽一個emit 發射的事件, 第一個參數為要監聽的事件名，第二個參數為一個callback function用來接收對方發來的數據.
如上述的介紹這裡的io.on就可以解釋為使用 on() 函數將特定的事件連接到指定的匿名函數(用來定義當伺服器接收到請求時，該做什麼事情，以及該如何回應), 藉此定義整個資料傳輸過程要如何運作。
而connection/connect事件則為socket.io默認的事件之一.
在這邊socket.io提供的interface是基於事件的,server端監聽”connectione”事件, 如果接收到client的連結請求, 就會進入callback function，而連上的socket就會開始監聽事件，事件的名稱就是’chat message’，當socket發出’chat message’事件時就會執行所寫的程式內容，以下面為例，當觸發事件後會針對io所有的client socket發出’chat message’事件以及其後發所帶的msg參數。
io.on為監聽跟client是否達成連線, 內圈的socket.on則是監聽client的事作而回覆對應的function, 通常這裡的事件也需要在client端建立同樣的事件名稱才行.
var io = require('socket.io')(http);
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
}); 5.撰寫index.html
在使用 Socket.io 時, 伺服器端與客戶端都必須要有它的 JS 檔案才有辦法運作, 而在上一步已經為server端裝上 Socket.io module了, 接下來就是為client端, 也就是在html中裝上模組.
裝法為在 HTML 頁面中加入以下這段程式碼.
<script src="https://cdn.socket.io/socket.io.js"></script>在Client端一樣要先註冊一個socket, 並建立監聽Server的’chat message’事件。
完整如下：
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script>
var socket = io.connect();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>
</html>參考：
1. http://socket.io/get-started/chat/
2. https://blog.allenchou.cc/socket-io-nodejs/
3. http://socket.io/docs/server-api/
沒有留言:
張貼留言