背景

宇宙第一PHP花叔最近家里在裝修，安裝了一個投影儀，把電腦的畫面投影到墻上，通過操控電腦來切換投影的畫面。有一天他突然問我，我們能不能通過一個微信小程序來遠程控制投影屏幕呢？接著我們討論了一下，確實可以，因為微信小程序有WebSocket API。WebSocket雖(sui)不(bu)是新技(ji)術，但它結合微信小程序這(zhe)個(ge)新產品，未(wei)來將(jiang)誕(dan)生出更(geng)多(duo)線(xian)上線(xian)下的應(ying)用場景，值得我(wo)們關注。于(yu)是(shi)做(zuo)了下面這個(ge)簡易(yi)的DEMO，利用微(wei)信小程(cheng)(cheng)序來遠程(cheng)(cheng)控制電腦屏幕(mu)。

開發過程

1、WebSocket服務器搭建

本次WebSocket服務器是基于Node.js來完成(cheng)部署的，所有我們首先需要搭建(jian)一個Node.js環境

- Node.js安裝(zhuang)

直接從Node.js官網(wang) //nodejs.org/en/ 直接下(xia)載然后(hou)安(an)裝(zhuang)即可

檢測是否安裝成功可以通過命令行工具運行以下命令

node -v

Node.js安裝成功后，其默認就安裝好了Node.js包管理工具npm，通過使用npm命令，我們就可以來安裝/卸載/更新Node.js包了。我(wo)們來(lai)安(an)裝(zhuang)WebSocket模塊，運行以下(xia)命令：

npm install ws

- 啟動(dong)WebSocket服(fu)務器

WebSocket模塊安裝完畢后，接下來我們通過簡單的幾行代碼來啟動WebSocket服務(wu)器，下面代碼保存為app.js，存放于當前目錄(lu)

//app.js
var conns = {};

var wss = require('ws').Server;

var server = new wss({
  host: "127.0.0.1",
  port: 9999
});

server.on('connection', function(ws) {

  ws.on('message', function(message) {    
    console.log(message);    

    var msg = JSON.parse(message);    //記錄客戶端信息
    if (msg.id) {
      conns[msg.id] = msg['info'];
      conns[msg.id]['conn'] = ws;      
      console.log(conns[msg.id]['name'] + ' - 已連接');
    }    //服務器向特(te)定的客(ke)戶(hu)端發送消息
    
    if (msg.fromId && msg.toId && msg.data) {      
      var temp = {        
          'name': conns[msg.fromId]['name'],        
         'msg': msg.data
      }
      conns[msg.toId]['conn'].send(JSON.stringify(temp));
    }

  });

});console.log('WebSocket server runing...');

 在命令行工具運行以下命令來啟動WebSocket服務器

node app.js

WebSocket服務器(qi)已經啟動完畢(bi)，接(jie)下來我們來看客戶(hu)(hu)端(duan)(duan)（我的電腦&微信小程(cheng)序）是如(ru)何(he)跟服務器(qi)端(duan)(duan)建立(li)起連接(jie)的，以及客戶(hu)(hu)端(duan)(duan)和服務器(qi)端(duan)(duan)之間的數據是如(ru)何(he)交(jiao)互的...

2、客戶端【我的電腦】和服務器端建立連接

客(ke)戶端【我(wo)的電(dian)腦】通過下(xia)面簡單的代碼來和服務器端建立(li)WebSocket連(lian)接

//創(chuang)建WebSocket連接
var ws = new WebSocket("ws://127.0.0.1:9999/");//監聽WebSocket連接打開(kai)

ws.onopen = function() { 
  console.log("Opened");  
    var obj = {
    id: 1,
    info: {
      name: '我的電腦'
    }
  };  //向服(fu)務器端發送(song)客(ke)戶端信息    
  ws.send(JSON.stringify(obj));
};//監聽(ting)從服務器發送過來(lai)的消息(xi)
  ws.onmessage = function(res) {  
    var temp = JSON.parse(res.data);  //收到不同(tong)(tong)的消息做(zuo)不同(tong)(tong)的處理(li)
    if (temp.msg == $('.metro li').length) {
    $('.close').click();
  } else {
    $('.metro li:eq(' + temp.msg + ')').click();
  }  
    console.log('收(shou)到(dao)[' + temp.name + ']發來的消息：' + temp.msg);
};//監聽WebSocket關閉
  ws.onclose = function() {  
    console.log("Closed");
};//監聽WebSocket錯誤(wu)      
  ws.onerror = function(err) {  
    console.log("Error: ");  
    console.log(err);
};

 運行客(ke)戶端【我的電腦】，我們可以看到WebSocket連接(jie)創建成功(gong)，已連接(jie)

3、客戶端【微信小程序】和服務器端建立連接

客戶端(duan)【微信小(xiao)程序】通(tong)過下面簡單的代碼來和服(fu)務器端(duan)建(jian)立WebSocket連接

var that = this;//創建WebSocket連(lian)接
 wx.connectSocket({
  url: 'ws://127.0.0.1:9999/'});//監聽WebSocket連(lian)接打開
   wx.onSocketOpen(function(res) {  
    console.log("Opened");  
    var obj = {
    id: 2,
    info: {
      name: '微(wei)信小(xiao)程序'
    }
  };  //向服務(wu)器端(duan)發送客戶端(duan)信息(xi)
  wx.sendSocketMessage({
    data: JSON.stringify(obj)
  });  //綁(bang)定(ding)頁面按鈕點擊(ji)事件(jian)
  that.remoteCtrl = function(e) {    //向服務器(qi)端發送對應的按鈕數據
    wx.sendSocketMessage({
      data: JSON.stringify({
        fromId: 2,
        toId: 1,
        data: e.currentTarget.id
      })
    });
  };

});//監(jian)聽從服務器(qi)發送(song)過來的消息
wx.onSocketMessage(function(res) {  
   var temp = JSON.parse(res.data);  
   console.log('收(shou)到[' + temp.name + ']發來的消息：' + temp.msg);
});//監聽WebSocket關(guan)閉(bi)
wx.onSocketClose(function(res) {  
   console.log("Closed");
});//監聽WebSocket錯誤
wx.onSocketError(function(res) {  
   console.log("Error: ");  
   console.log(err);
});

 運(yun)行(xing)客(ke)戶端【微信(xin)小程(cheng)序】，我們可以看(kan)到WebSocket連(lian)接創建成功，已(yi)連(lian)接

4、客戶端【我的電腦】和【微信小程序】之間的通信

通過(guo)上面的(de)第2、3步，我(wo)(wo)們已經(jing)將(jiang)客(ke)戶端(duan)和(he)服務器之(zhi)間的(de)連接建立起來，下面我(wo)(wo)們就可以(yi)讓(rang)【我(wo)(wo)的(de)電腦】和(he)【微(wei)信(xin)小程序】這(zhe)兩個客(ke)戶端(duan)之(zhi)間進行相互通信(xin)了，達(da)到【微(wei)信(xin)小程序】遠(yuan)程控制【我(wo)(wo)的(de)電腦】的(de)目的(de)了，如下圖所示

總結

從以(yi)(yi)(yi)上(shang)簡易的(de)DEMO可(ke)以(yi)(yi)(yi)延(yan)伸出很多遠程控制的(de)應(ying)用場景(jing)，此外基于WebSocket的(de)特性，還可(ke)以(yi)(yi)(yi)做聊天室、在線游戲、實時(shi)彈(dan)幕等功能(neng)。就如文章(zhang)開頭所講(jiang)，WebSocket雖不(bu)是(shi)新技術，但它(ta)結(jie)合微信(xin)小程序這個新產品，未來將(jiang)誕生(sheng)出更多線上(shang)線下(xia)的(de)應(ying)用場景(jing)，值得我們(men)關注。