socket.io簡述

1、基本介紹

socket.io是基於websocket技術，實現實時通訊功能的技術。

簡單來說，通過websocket技術，客戶端可以和伺服器端進行雙向實時通訊，從而可以實現很多高階特性。

這裡附一個阮一峰的關於WebSocket 教程，以供深入理解。

而socket.io是以websocket技術為主，為了相容性還帶多個降級支援辦法，包括：

Flash Socket

AJAX long-polling

AJAX multipart Stream

Forever IFrame

JSONP polling

他會根據瀏覽器的支援程度，自動選擇通過哪種技術來實現通訊。

2、環境

socket.io封裝了前端和後端的全部內容，他是一個跨平臺的庫。

包括前端的socket.io的js庫，以及後端基於Node.js的模組。

簡單來說：

1. 前端引入socket.io的js檔案即可；
2. 後端通過npm安裝socket.io，然後引入並使用即可；

3、前端

socket.io官網下載即可，或者直接引入通過CDN加速過的檔案。

需要結合後端使用（請看4）

4、後端

我姑且認為你有Node.js和npm。

通過npm安裝socket.io

npm install --save socket.io

然後通過require引入socket.io的初始化函式，並使用這個函式初始化http伺服器例項。

這裡假定你使用express框架（因為這個最簡單方便），如以下程式碼：

// 引入需要的模組：http和express
var http = require('http');
var express = require('express');
var path = require('path');
var app = express();
//設定public為靜態目錄
app.use(express.static(path.join(__dirname, 'public')));
app.set('port', '80');
var server = http.createServer(app);
//啟動伺服器
 

server.listen(80);

//以上伺服器建立完畢，這個時候可以引入socket.io了
//建立socket
var io = require('socket.io')(server);

初始化之後，會返回一個物件io;

用這個物件去監聽connection事件，然後在回撥函式裡傳的引數，就是每一個使用者的websocket例項;

可以用這個例項對該使用者傳送資訊，或者監聽使用者發出的資訊等。

//新增連線監聽
io.on('connection', function (socket) {
    console.log("Clent has connectioned");
    var number = 0;
    //連線成功則執行下面的監聽
    socket.on('message', function (event) {
        console.log('Received message from client!', event);
        number++;
        socket.emit("receiveMessage", new Date() + "：客戶端第" + number + "次傳送資訊");
    });
    //斷開連線callback
    socket.on('disconnect', function () {
        console.log('Clent has disconnected');
    });
});

可以見我寫的最簡單的示例DEMO：baseApp.js

down下來之後使用 node baseApp.js 來執行。（記得要先 npm install 安裝依賴）

基本頁面是 http://localhost/base.html

我的github示例DEMO（包括最簡單的示例DEMO以及一個網路對戰版五子棋）