Socket.io
Socket.io 與 Express.js 一樣都是屬於 Node.js 中的一個套件,但 Socket.io 是讓伺服器與客戶端(瀏覽器)可以互相傳遞資料,並且搭配瀏覽器上的 JavaScript 來做到即時更新。
這裡所說的即時更新,就是類似 Facebook 的即時通訊功能,那個只用瀏覽器就能讓你送出的訊息迅速的傳到另外一個人的功能。
以伺服器技術來說,就是所謂的彗星伺服器(comet server)。
安裝
與 Express.js 相同,Socket.io 也不是 Node.js 內建的套件,所以我們必須要先安裝才能使用。
npm install socket.io
在使用 Socket.io 時,伺服器端與客戶端都必須要有它的 JS 檔案才有辦法運作,而在上一步驟我們已經為伺服器端裝上 Socket.io 的模組了,接下來就是為客戶端,也就是網頁端裝上模組。
裝法很簡單,只需要在你的 HTML 頁面中的 <head>
標籤之間加入以下這段程式碼
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
這樣你的網頁就可以使用 Socket.io 的功能了。
使用
在使用之前,我們同樣必須要先做引入並且建立物件的動作(註:因 Socket.io 依賴 HTTP 所以這裡採用一併引入的方式)
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http)
使用方法其實很簡單,只會用到一個稱作 on 的方法就能啟動 Socket.io 的功能。
io.on('connection', function(socket){
console.log('a user connected');
});
上面這段程式碼是在做連線的動作,當有人連上你的伺服器時,你的終端機就會顯示「a user connected」的字串。
完整的伺服器端程式碼如下,你可以建立一個名為 server.js 的檔案,並將程式碼輸入進去
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendfile('index.html');
});
io.on('connection', function(socket){
console.log('a user connected');
});
http.listen(8080, '127.0.0.1', function(){
console.log('HTTP Server: http://127.0.0.1:8080/');
});
但光有伺服器端是不夠的,我們還需要一個客戶端才能夠感受到 Socket.io 的威力。不知眼尖的你是否有在伺服器端的程式中看到上一節熟悉的身影呢? 是的,就是 Express!
那麼,現在我們就來建立這個客戶端吧。請在與 server.js 相同目錄下建立一個名為 index.html 的檔案,然後輸入以下的程式碼
<!doctype html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
</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>
var socket = io();
</script>
</body>
</html>
請注意 HTML 檔案中的這段程式碼
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
</script>
這段是客戶端與伺服器端建立溝通橋樑的重要關鍵,少了這段就無法做溝通了。
到此,簡易版的 Socket.io 測試程式就這樣完成囉!
開啟你的終端機,並輸入 node server.js
然後再開啟 http://127.0.0.1:8080/ ,你如果在終端機中看到如下的畫面,就是成功了!
其實,這一節的 Socket.io 教學我是引自官方網站的展示範例,而在此處我只講了一小部分,因為在之後實作專題中會有更多例子可以看,便不再贅述。
如果想知道這一節範例的完整後續,可以參考官方網站: http://socket.io/get-started/chat/