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/