Socket.io教學

5 / 15, 2014 node.js , 網路

大家好哦!在這數個月有很多事發生了,我弄了一個佈景主題,也花了很多時間弄了一個搶答系統。這段時間我都沒有什麼理會這個部落格(Allen,對不起),還有以前寫的node.js教學好像沒有再繼續寫,所以現在就繼續寫一下(嘆氣)。這次我們要介紹的就是Socket.io,一個可以令瀏覽器和node.js伺服器有雙向溝通的程式庫。他主要利用了WebSocket,一個新的HTML5技術來建立一個對伺服器的長時間連線。WebSocket就像一個普通的TCP連線,可是它整個是基於HTTP協定的,所以普通的HTTP伺服器也可以使用WebSocket。好了,我們現在開始socket.io教學!

擷取

首先,我們要利用npm安裝Socket.io:

然後我們要在我們的程式裡面載入socket.io:

因為socket.io需要一個HTTP伺服器才可以運作,我們需要把socket.io黏附到一個HTTP伺服器:

值得注意的是,Socket.io並不會影響你的HTTP伺服器的運作。現在,我們是時候要開始使用socket.io了!

Socket.io伺服器端基本

首先,好像HTTP伺服器,我們要有一個Callback給Socket.io去應付我們的Socket連線:

和HTTP伺服器的request和response一樣,callback裡面的socket代表了一個連線,你可以在socket上面發送和接收資料。

如果想一次過發送資料給所有連線的人,那怎麼辦呢?我們可以利用socket.broadcast.emit來廣播資料,要注意的是發送廣播的socket並不會收到資料:

 Socket.io網頁端基本

首先,我們要匯入socket.io的JS(socket.io會自動提供):

然後我們就要連線至Socket.io伺服器:

然後我們就可以開始發送和接收資料:

這次的教學就到這裡吧!如果有什麼不明白,可以在下面的留言找我,我會盡快回復。

  • DevilSu

    請問如何建立一個C++寫的client端連線到node.js建立的socket呢?

    • s3131212

      您好,不好意思我對 C++ 沒有太多認識,不太清楚喔 🙁

    • Hamilton

      你的 c++ 必須也用 Socket.io Library

  • “因為socket.io需要一個HTTP伺服器才可以運作,我們需要把socket.io黏附到一個HTTP伺服器:”
    這個…..好像可以獨立執行吧??

    • s3131212

      印象中是可以,可是要抓客戶端的 JS 檔還是要有 HTTP Server

  • kiss

    浏览器访问客户端的时候需要加上端口号吗?

    • s3131212

      要,除非是 port 80 可以不用加

      • kiss

        也就是说,如果我监听8080端口我还要再起个8080端口的项目。那我能问下,我本身有个项目,我想在这个项目里面使用socket.io做邮件实时提醒,这个时候我需要有个客户端接收到有邮件通知,并且这个客户端能够修改页面上的邮件数量。这个socket.io能做吗?因为我本身项目用的就是80端口,

        • s3131212

          socket io 本身只是在作即時通訊的功能,也就是即時提醒有新郵件,至於觀看、編輯、刪除等等功能是另外一回事,可以採用 AJAX 或 AJAJ 的方式作通訊

  • geass

    請問在瀏覽器打網頁IP是可以建立連線的
    請問android 的 webview 載入網頁IP 詳細要怎麼做呢
    (載入時 server 就自動停止 我知道webview 好像沒有socket功能
    可是我不知道如何讓 android (app) 和 nodejs socket做一些雙向溝通

    • Licson Lee

      webview沒websocket不要緊,socket.io會自動fallback用AJAX HTTP Streaming/Long Polling

  • guest

    var io = socket_io.listen(server);

    server 找不到

    • s3131212

      以下是小弟的寫法:

      var express = require(‘express’);
      var app = express();
      var server = require(‘http’).createServer(app);
      var io = require(‘socket.io’).listen(server);

      由於不清楚原作者 Licson 他在想什麼,所以就先不改文,不妨先試試看我的寫法吧

      • guest

        express 有什麼用 ?

        • s3131212

          抱歉之前沒看到
          Express 是 node.js 的一個 Framework

    • Licson Lee

      server 就是 http.Server 物件阿(就是node.js本來的HTTP伺服器物件或是Express也可以)

  • abow

    請問 這個有完整程式碼 SAMPLE嗎? 謝謝

    • s3131212

      官網都有詳細的教學與教學範例檔喔

  • secret

    Still is Node.js…