今天酷牛教程小编给大家分享的是怎么使用WebSocket进行微信小程序远程控制电脑屏幕?对这个感兴趣的小伙伴们就和酷牛教程小编一起学习下吧，以下就是具体的内容。
开发过程
1、WebSocket服务器搭建
本次WebSocket服务器是基于Node.js来完成部署的，所有我们首先需要搭建一个Node.js环境
- Node.js安装
检测是否安装成功可以通过命令行工具运行以下命令
node -v
- WebSocket模块安装
Node.js安装成功后，其默认就安装好了Node.js包管理工具npm，通过使用npm命令，我们就可以来安装/卸载/更新Node.js包了。我们来安装WebSocket模块，运行以下命令：
npm install ws
- 启动WebSocket服务器
WebSocket模块安装完毕后，接下来我们通过简单的几行代码来启动WebSocket服务器，下面代码保存为app.js，存放于当前目录
//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\\\'] + \\\' - 已连接\\\');
} //服务器向特定的客户端发送消息
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服务器已经启动完毕，接下来我们来看客户端(我的电脑&微信小程序)是如何跟服务器端建立起连接的，以及客户端和服务器端之间的数据是如何交互的...
2、客户端【我的电脑】和服务器端建立连接
客户端【我的电脑】通过下面简单的代码来和服务器端建立WebSocket连接
//创建WebSocket连接
var ws = new WebSocket(\"ws://127.0.0.1:9999/\");//监听WebSocket连接打开
ws.onopen = function() {
console.log(\"Opened\");
var obj = {
id: 1,
info: {
name: \\\'我的电脑\\\'
}
}; //向服务器端发送客户端信息
ws.send(JSON.stringify(obj));
};//监听从服务器发送过来的消息
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 + \\\']发来的消息：\\\' + temp.msg);
};//监听WebSocket关闭
ws.onclose = function() {
console.log(\"Closed\");
};//监听WebSocket错误
ws.onerror = function(err) {
console.log(\"Error: \");
console.log(err);
};
运行客户端【我的电脑】，我们可以看到WebSocket连接创建成功，已连接
3、客户端【微信小程序】和服务器端建立连接
客户端【微信小程序】通过下面简单的代码来和服务器端建立WebSocket连接
var that = this;//创建WebSocket连接
wx.connectSocket({
url: \\\'ws://127.0.0.1:9999/\\\'});//监听WebSocket连接打开
wx.onSocketOpen(function(res) {
console.log(\"Opened\");
var obj = {
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) {
var temp = 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虽不是新技术，但它结合微信小程序这个新产品，未来将诞生出更多线上线下的应用场景，值得我们关注。
以上就是怎么使用WebSocket进行微信小程序远程控制电脑屏幕的全部内容了，大家都学会了吗?
本文来自投稿，不代表酷牛教程立场，如若转载，请注明出处：https://www.xukn.com/97506.html
