socket.io快速入門案例

socket.io基本介紹

建立一個nodejs項目

步驟1：建立項目目錄

步驟2：初始化nodejs項目
命令：npm init -f

結果以下：

在nodejs項目安裝socket.io模塊

命令：npm install sokcet.io

socket.io網站：https://socket.io/

socket.io快速入門案例

客戶端：index.html

<!-- 引入遠程socket.io.js -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.1/socket.io.js"></script> -->

<!-- 官方例子寫法 -->
<!-- <script src="/socket.io/socket.io.js"></script> -->
<!-- 須要改爲如下寫法 -->
<script src="http://localhost:8888/socket.io/socket.io.js"></script>

<script>

  //建立socket
  var socket = io('http://localhost:8888');

  /* 
    建立自定義事件 'news'
    做用：接受服務端 socket.emit('news', 數據); 發出的數據
  */
  socket.on('news', function (data) {

    //輸出服務端響應了數據
    console.log(data);

    //向服務端的自定義事件 'my other event' 發出數據
    socket.emit('my other event', { my: 'data' });
  });
</script>

服務端：server.js [node.js]

var app = require('http').createServer(handler)
var io = require('socket.io')(app); 
var fs = require('fs');

app.listen(8888);


//URL請求處理
/*
服務器web請求處理器
做用: 當客戶端請localhost:8888時，打開默認頁面 /index.html
*/
function handler (req, res) {
  //打開默認頁面
  fs.readFile(__dirname + '/index.html',
  
  //響應處理方法
  function (err, data) {

    //狀況1：若是 err 不爲空，那麼表示沒有找到 /index.html
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }

    //狀況2：找到了 /index.html
    res.writeHead(200);
    res.end(data);
  });
}


// socket請求處理
io.on('connection', function (socket) {

  // 向客戶端的自定義事件'news'發送數據
  socket.emit('news', { hello: 'world' });
  
  // 建立自定義事件 my other event
  socket.on('my other event', function (data) {
    console.log(data);
  });
});