socket.io實踐干貨

一、前言

• socket.io 實現了實時雙向的基於事件的通訊機制，是基於 webSocket 的封裝，但它不僅僅包括 webSocket，還對輪詢（Polling）機制以及其它的實時通信方式封裝成了通用的接口，並且在服務端實現了這些實時機制的相應代碼
• socket.io 是跨平台的，可以實現多平台的即時通訊
• 由於 iOS 端進行 socket 編程主要使用 GCDAsyncSocket 框架，但要實現 Android、iOS、web 多平台的通訊，還是選擇統一的框架或協議比較好。
• 基本 api，使用 socket.on 來監聽傳過來的數據，使用 socket.emit 來發送數據

二、本例說明

• 服務器端采用 Nodejs 開啟本地服務，統一使用 socket.io 對 iOS 端和 web 進行即時通訊，簡單實現類似你猜我畫的數據傳輸
• 效果
  

三、服務器端

• 使用 express 進行簡單的搭建，設置模板引擎及靜態服務，新手會遇到一個坑，就是路徑的問題，一般使用 __dirname，來拼接絕對路徑

  // 模板引擎
  app.set("views", path.join(__dirname, "/views/"));
  app.set("view engine", "ejs");
  // 靜態服務
  app.use(express.static(path.join(__dirname, "/public/")));
  app.use("/upload", express.static(path.join(__dirname, "/upload/")));
  

• 使用 socket.io，來進行 socket 數據監聽及數據廣播，這是服務器端做的主要事情，本例中傳輸的數據及格式是自定義的，分為三種，一種是畫筆畫的路徑（path），傳輸的是一系列的坐標點，一種是圖片（img），傳輸的是 base64 字符串，另一種是發送的文字（text），傳輸的是字符串

    var http = require('http').Server(app);
    var io = require('socket.io')(http);

    io.on('connection', function (socket) {
        console.log('one client connected');
        // 連接成功，自己給自己發個空的信息，回調下
        socket.emit('connection', null);
        // path
        socket.on('path', function (msg) {
            socket.broadcast.emit('path', msg);
        });
        // img
        socket.on('img', function (msg) {
            socket.broadcast.emit('img', msg);
        });
        // text
         socket.on('text', function (msg) {
            // 給出自己外的其他所有的 socket 廣播
            socket.broadcast.emit('text', msg);
            // 給所有的 socket 的廣播，包括自己
            // io.emit('text', msg);
        });
    });

四、web

• 關於筆畫的傳輸：使用 canvas,進行畫板的相關操作，並保存所有的路徑的坐標點，然后 socket 傳輸

  // canvas 繪圖
  // 拿到 canvas htmlElement
  // var canvas = document.getElementById("canvas");
  var canvas = $("#canvas").get(0);
  // 創建上下文 
  var ctx = canvas.getContext("2d");
  var colorArray = ["black", "red", "blue", "green"];
  // 鼠標畫圖
  canvas.onmousedown = function (e) {
      // 開始畫
      ctx.beginPath();
      // ctx 屬性設置
      ctx.lineWidth = 3;
      ctx.lineCap = "round";
      ctx.lineJoin = "round";
      let randomNum = parseInt(Math.random() * colorArray.length);
      var mycolor = colorArray[randomNum];
      ctx.strokeStyle = mycolor;
      // tmp 為裝所有坐標點的數組
      var tmp = [];
      var e = e || window.event;
      // 第一個坐標點
      var point = {
          x: e.clientX - canvas.offsetLeft,
          y: e.clientY - canvas.offsetTop
      }
      ctx.moveTo(point.x, point.y);
      tmp.push(point);
  
      document.onmousemove = function (e) {
              var e = e || window.event;
              var point = {
              x: e.clientX - canvas.offsetLeft,
                  y: e.clientY - canvas.offsetTop
          }
          ctx.lineTo(point.x, point.y);
          tmp.push(point);
          ctx.stroke();
      };
      document.onmouseup = function () {
          document.onmousemove = null;
          document.onmouseup = null;
  
      // socket 發送path
       var pathDataDict = {
       path: tmp,
       width: 3,
       color: randomNum,
       screenW: 400
      }
      socket.emit("path", pathDataDict);
      };
  };
  

• 關於圖片的傳輸：由於 input type="file" 拿不到本地的圖片路徑，所以采取先上傳圖片到服務器，再拿到圖片路徑，然后通過 canvas 畫出來和用 canvas 轉換為 base64，然后 socket 發送出去

  • 這里采用 jquery.form 框架，使用 ajax 異步提交表單，新手有個坑，就是 form 里面提交按鈕的 type 要設置為 button，不然就是 form submit了，頁面會跳轉的

    $("#selImg").click(function () {
    // form 提交
    $("#form").ajaxSubmit({
        url: "http://127.0.0.1:5000",
        type: "post",
        dataType: 'json',
        success: function (data) {
            if (data.status == -1) {
                alert("請選擇圖片發送！");
                return;
            } 
            if (data.status == 1) {
                alert("圖片上傳失敗！");
                return;
            }
    
            // html Dom Element
            let image = new Image();
            image.src = "http://127.0.0.1:5000/upload/" + data.status;
            image.onload = function () {
                ctx.drawImage(image, 0, 0, 400, 400);
                var base64Url = canvas.toDataURL("image/png");
                let base64 = base64Url.toString()
                console.log(base64.substring(22));
                socket.emit("img", base64.substring(22));
    
            };
        },
        error: function (data) {
    
        }
    });
    });
    

• 關於文字，就很簡單，直接 socket 發送字符串

• 關於數據的接收，這里要提到一個與 iOS 版 socket.io 不同的地方，在 iOS 端，發送數據是要把數據包裝成一個數組的，如 [self.clientSocket emit:@"text" with:@[self.chatTextField.text]];，但在前端接收的數據就直接是 iOS 端數組里的對象，不用取數組第一個，但反過來，在 iOS 端就需要去數組里的第一個了，這里簡單說下圖片的接收吧，由於對 canvas 不熟，只能采取先創建一個臨時的 img 標簽展示 base64Url 的圖片，然后在 canvas 接收 img 這個 HTMLElement，畫出圖片，最后刪掉這個臨時的 img 標簽，如果有更好的方法可以留言

  socket.on("img", function (msg) {
      console.log("img");
      // base64 可以直接用<img>展示出來 ，獲取 img 標簽對象，可畫出來
      $(".caozuo").append("<img id='tmpImg' width='0' height='0' src='data:image/png;base64," + msg + "'></img>");
      ctx.drawImage($("#tmpImg").get(0), 0, 0, 400, 400);
      $("#tmpImg").remove();
  });
  

五、iOS

• 這里官方最新的 socket.io 是只有 swift 版的，之前有舊的oc 版本，但支持的socket.io 是v0.9.x，參考鏈接 https://github.com/pkyeck/socket.IO-objc，但這很顯然不是我想要的，於是開始混編吧
• 一開始參考了https://github.com/socketio/socket.io-client-swift/issues/393 里的做法，使用 carthage 打包好的 framework，但各種報錯
• 想起之前 oc 調用 swfit 文件，先是直接把 swift 文件拖進工程，然后使用的時候就import "項目名稱-swift.h"就行，不需要橋接文件什么的，但在 xcode8 下，貌似感覺還是需要橋接文件。具體做法如下
  • 先拖進一個 swift 文件到 oc 工程里，xcode 會提示創建橋接文件，這里就讓 xcode 自動創建橋接文件吧
  • 然后把剩余的 socket.io-client-swift 框架 Source 文件夾里的剩余文件全部拖進 oc 工程
  • 使用的時候就import "項目名稱-swift.h"
• 在 iOS 端下，筆畫路徑坐標，就直接傳輸字典就行，我這里字典里包括筆畫的顏色，坐標點數組，筆畫的寬度及屏幕的寬度等信息，圖片就直接傳輸 base64 的，文字就直接傳輸字符串，但要注意和 web 端的 socket.io 的區別，具體代碼可參考 demo 鏈接

六、小 demo 地址

• https://github.com/HOWIE-CH/-You-guess-I-painted-_socket

七、其他

• 使用 socket.io，感覺傳輸數據很方便，api 簡單，也沒有像 GCDAsyncSocket 傳輸數據會出現掉包的現象
• 對於服務器，Nodejs等，我也是新手，如果自己想玩一下的話，可以租國外性價比高的 vps，然后申請域名，可以采取使用 Nginx 做主服務，使用反向代理，這樣可方便綁定自己的各種二級域名了，應用服務可以使用 Nodejs 或其他，也可以自己研究下 Nginx 的負載均衡技術了。對與國外 vps 的好處，大家都知道，還可搭建自己的科學上網環境等