正在阅读：WebSocket怎么进行微信小程序远程控制电脑屏幕WebSocket怎么进行微信小程序远程控制电脑屏幕

　　今天小编给大家分享的是怎么使用WebSocket进行微信小程序远程控制电脑屏幕?对这个感兴趣的小伙伴们就和小编一起学习下吧，以下就是具体的内容。

      开发过程

　　1、WebSocket服务器搭建

　　本次WebSocket服务器是基于Node.js来完成部署的，所有我们首先需要搭建一个Node.js环境

　　-Node.js安装

　　检测是否安装成功可以通过命令行工具运行以下命令

　　node-v

　　-WebSocket模块安装

　　Node.js安装成功后，其默认就安装好了Node.js包管理工具npm，通过使用npm命令，我们就可以来安装/卸载/更新Node.js包了。我们来安装WebSocket模块，运行以下命令：

　　npminstallws

　　-启动WebSocket服务器

　　WebSocket模块安装完毕后，接下来我们通过简单的几行代码来启动WebSocket服务器，下面代码保存为app.js，存放于当前目录

　　//app.js

　　varconns={};

　　varwss=require('ws').Server;

　　varserver=newwss({

　　host:"127.0.0.1",

　　port:9999

　　});

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

　　ws.on('message',function(message){

　　console.log(message);

　　varmsg=JSON.parse(message);   //记录客户端信息

　　if(msg.id){

　　conns[msg.id]=msg['info'];

　　conns[msg.id]['conn']=ws;

　　console.log(conns[msg.id]['name']+'-已连接');

　　}   //服务器向特定的客户端发送消息

　　if(msg.fromId&&msg.toId&&msg.data){

　　vartemp={

　　'name':conns[msg.fromId]['name'],

　　'msg':msg.data

　　}

　　conns[msg.toId]['conn'].send(JSON.stringify(temp));

　　}

　　});

　　});console.log('WebSocketserverruning...');

　　在命令行工具运行以下命令来启动WebSocket服务器

　　nodeapp.js

　　WebSocket服务器已经启动完毕，接下来我们来看客户端(我的电脑&微信小程序)是如何跟服务器端建立起连接的，以及客户端和服务器端之间的数据是如何交互的...

　　2、客户端【我的电脑】和服务器端建立连接

　　客户端【我的电脑】通过下面简单的代码来和服务器端建立WebSocket连接

　　//创建WebSocket连接

　　varws=newWebSocket("ws://127.0.0.1:9999/");//监听WebSocket连接打开

　　ws.onopen=function(){

　　console.log("Opened");

　　varobj={

　　id:1,

　　info:{

　　name:'我的电脑'

　　}

　　}; //向服务器端发送客户端信息

　　ws.send(JSON.stringify(obj));

　　};//监听从服务器发送过来的消息

　　ws.onmessage=function(res){

　　vartemp=JSON.parse(res.data); //收到不同的消息做不同的处理

　　if(temp.msg==$('.metroli').length){

　　$('.close').click();

　　}else{

　　$('.metroli:eq('+temp.msg+')').click();

　　}

　　console.log('收到['+temp.name+']发来的消息：'+temp.msg);

　　};//监听WebSocket关闭

　　ws.onclose=function(){

　　console.log("Closed");

　　};//监听WebSocket错误

　　ws.onerror=function(err){

　　console.log("Error:");

　　console.log(err);

　　};

　　运行客户端【我的电脑】，我们可以看到WebSocket连接创建成功，已连接

　　3、客户端【微信小程序】和服务器端建立连接

　　客户端【微信小程序】通过下面简单的代码来和服务器端建立WebSocket连接

　　varthat=this;//创建WebSocket连接

　　wx.connectSocket({

　　url:'ws://127.0.0.1:9999/'});//监听WebSocket连接打开

　　wx.onSocketOpen(function(res){

　　console.log("Opened");

　　varobj={

　　id:2,

　　info:{

　　name:'微信小程序'

　　}

　　}; //向服务器端发送客户端信息

　　wx.sendSocketMessage({

　　data:JSON.stringify(obj)

　　}); //绑定页面按钮点击事件

　　that.remoteCtrl=function(e){   //向服务器端发送对应的按钮数据

　　wx.sendSocketMessage({

　　data:JSON.stringify({

　　fromId:2,

　　toId:1,

　　data:e.currentTarget.id

　　})

　　});

　　};

　　});//监听从服务器发送过来的消息

　　wx.onSocketMessage(function(res){

　　vartemp=JSON.parse(res.data);

　　console.log('收到['+temp.name+']发来的消息：'+temp.msg);

　　});//监听WebSocket关闭

　　wx.onSocketClose(function(res){

　　console.log("Closed");

　　});//监听WebSocket错误

　　wx.onSocketError(function(res){

　　console.log("Error:");

　　console.log(err);

　　});

　　运行客户端【微信小程序】，我们可以看到WebSocket连接创建成功，已连接

　　4、客户端【我的电脑】和【微信小程序】之间的通信

　　通过上面的第2、3步，我们已经将客户端和服务器之间的连接建立起来，下面我们就可以让【我的电脑】和【微信小程序】这两个客户端之间进行相互通信了，达到【微信小程序】远程控制【我的电脑】的目的了，如下图所示

　　总结

　　从以上简易的DEMO可以延伸出很多远程控制的应用场景，此外基于WebSocket的特性，还可以做聊天室、在线游戏、实时弹幕等功能。就如文章开头所讲，WebSocket虽不是新技术，但它结合微信小程序这个新产品，未来将诞生出更多线上线下的应用场景，值得我们关注。