背景

宇宙第一PHP花叔最近家里在裝修，安裝了一個投影儀，把電腦的畫面投影到墻上，通過操控電腦來切換投影的畫面。有一天他突然問我，我們能不能通過一個微信小程序來遠(yuǎn)程控制投影屏幕呢？接著我們討論了一下，確實可以，因為微信小程序有WebSocket API。WebSocket雖不是新技術(shù)，但它結(jié)合微信小程序這個新產(chǎn)品，未來將誕生出更多線上線下的應(yīng)用場景，值得我們關(guān)注。于是做了下面這個簡易的DEMO，利用微信小程序來遠(yuǎn)程控制電腦屏幕。

開發(fā)過程

1、WebSocket服務(wù)器搭建

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

- Node.js安裝

直接從Node.js官網(wǎng) https://nodejs.org/en/ 直接下載然后安裝即可

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

node -v

- WebSocket模塊安裝

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

npm install ws

- 啟動WebSocket服務(wù)器

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

//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'] + ' - 已連接');
    }    //服務(wù)器向特定的客戶端發(fā)送消息
    
    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服務(wù)器

node app.js

WebSocket服務(wù)器已經(jīng)啟動完畢，接下來我們來看客戶端（我的電腦&微信小程序）是如何跟服務(wù)器端建立起連接的，以及客戶端和服務(wù)器端之間的數(shù)據(jù)是如何交互的...

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

客戶端【我的電腦】通過下面簡單的代碼來和服務(wù)器端建立WebSocket連接

//創(chuàng)建WebSocket連接
var ws = new WebSocket("ws://127.0.0.1:9999/");//監(jiān)聽WebSocket連接打開

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

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

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

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

var that = this;//創(chuàng)建WebSocket連接
 wx.connectSocket({
  url: 'ws://127.0.0.1:9999/'});//監(jiān)聽WebSocket連接打開
   wx.onSocketOpen(function(res) {  
    console.log("Opened");  
    var obj = {
    id: 2,
    info: {
      name: '微信小程序'
    }
  };  //向服務(wù)器端發(fā)送客戶端信息
  wx.sendSocketMessage({
    data: JSON.stringify(obj)
  });  //綁定頁面按鈕點擊事件
  that.remoteCtrl = function(e) {    //向服務(wù)器端發(fā)送對應(yīng)的按鈕數(shù)據(jù)
    wx.sendSocketMessage({
      data: JSON.stringify({
        fromId: 2,
        toId: 1,
        data: e.currentTarget.id
      })
    });
  };

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

 運行客戶端【微信小程序】，我們可以看到WebSocket連接創(chuàng)建成功，已連接

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

通過上面的第2、3步，我們已經(jīng)將客戶端和服務(wù)器之間的連接建立起來，下面我們就可以讓【我的電腦】和【微信小程序】這兩個客戶端之間進行相互通信了，達(dá)到【微信小程序】遠(yuǎn)程控制【我的電腦】的目的了，如下圖所示

 

總結(jié)

從以上簡易的DEMO可以延伸出很多遠(yuǎn)程控制的應(yīng)用場景，此外基于WebSocket的特性，還可以做聊天室、在線游戲、實時彈幕等功能。就如文章開頭所講，WebSocket雖不是新技術(shù)，但它結(jié)合微信小程序這個新產(chǎn)品，未來將誕生出更多線上線下的應(yīng)用場景，值得我們關(guān)注。