树莓派 - 实战篇 [基于 websocket 实现手机远程控制树莓派小车]

前言

立下的flag总是要还的,这篇的文章可能比较长,基于websocket来远程控制树莓派小车。首先需要有一个公网服务器,我这边已经在公网启用了一个websocket服务,作为远程控制树莓派小车数据中转平台。

设计思路

1.当树莓派启动后,需要连接公网websocket服务,绑定设备ID和修改树莓派的在线状态
2.手机H5页面,页面根据设备ID查询设备的在线状态,在线则允许操作
3.H5页面websocket客户端处理客户端的前进、后退、停止、左转和右转操作,与树莓派数据互通达到控制树莓派的目的

树莓派小车组装

这个不多说,某宝上面搜索即可,买个套装带常用传感器的就可以,教程掌柜也会提供。我的教程会针对四轮驱动来讲,这里就跳过了。

Web端

web端操作很简单5个按钮,分别控制树莓派小车的前后左右停操作,直接上代码

<html>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<style type="text/css">
    #car {
        position: fixed;
        width: 300px;
        bottom: 20px;
        margin: 20px auto;
        left: 0;
        right: 0;
    }

    button.top {
        display: block;
        height: 50px;
        width: 90px;
        margin: 10px auto;
    }

    button.left {
        height: 50px;
        width: 90px;
        margin-right: 10px;
    }

    button.right {
        height: 50px;
        width: 90px;
    }

    button.bottom {
        display: block;
        height: 50px;
        width: 90px;
        margin: 10px auto;

    }

    button.stop {
        height: 50px;
        width: 90px;
        margin-right: 10px;
    }
</style>
<head>
    <title>Smarty Car</title>
</head>
<body>
<p id="message"></p>
<div id="car">
    <button class="top" onclick="send('forward')">Forward</button>
    <button class="left" onclick="send('left')">Left</button>
    <button class="stop" onclick="send('stop')">Stop</button>
    <button class="right" onclick="send('right')">Right</button>
    <button class="bottom" onclick="send('back')">Back</button>
</div>
</body>
<script>
    // 初始化websocket客户端
    var socket, fd;
    var host = "ws://192.168.33.10:9511/";
    socket = new WebSocket(host);
    // 连接完成 询问树莓派是否在线
    socket.onopen = function () {
        var data = new Object();
        data.devices = 'smart_car';
        data.action = 'init';
        socket.send(JSON.stringify(data));
    };
    // 接收消息
    socket.onmessage = function (evt) {
        var jsonData = JSON.parse(evt.data);
        // 如果返回树莓派在线状态
        if (jsonData.err_code != 0) {
            fd = 0
            document.getElementById('message').textContent = jsonData.err_msg;
        } else {
            //返回在线 绑定树莓派的websocket fd
            fd = jsonData.fd;
            document.getElementById('message').textContent = '终端在线';
        }
    };
    // 连接关闭事件
    socket.onclose = function () {
    }

    //发送消息
    function send(msg) {
        if (!fd) {
            document.getElementById('message').textContent = '终端未在线!';
            return false;
        }
        var data = new Object();
        data.devices = fd;
        switch (msg) {
            case 'forward':
            case 'left':
            case 'stop':
            case 'right':
            case 'back':
                data.action = msg;
                break;
            default:
                document.getElementById('message').textContent = '错误函数调用';
                return false;
        }
        try {
            socket.send(JSON.stringify(data));
        } catch (ex) {

        }
    }
</script>
</html>

websocket服务端

我这边使用Laravel框架搭建web服务及websocket服务器,安装了swoole扩展,如果是php专业且用laravel框架搭建websocket的服务的,可以安装这个包来实现简单的websocket服务。也欢迎各位star和issues。如果不想搭建或没有公网IP可以私信我开放接口给各位。

 composer require wenjunting50779/laravel-fast

树莓派端

未完,容我续一杯咖啡~

本作品采用《CC 协议》,转载必须注明作者和本文链接

死磕渴望的知识,不要放弃,终将会有所收获。

讨论数量: 3

本来想白漂你的前端呢,结果咋比我的还丑啊 :joy:。

1周前 评论

@tiansai 白嫖是不可能的,想想就好了

1周前 评论

大佬实现了吗 :see_no_evil:

8小时前 评论

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!