微信排插（自己搭建服务器HTML5）

ihalin

微信排插（自己搭建服务器HTML5） [复制链接]

本帖最后由 ihalin 于 2017-5-4 22:13 编辑

接着上次玩玩微信物联网直连控制LED灯（不需要自己搭建服务器）
https://bbs.eeworld.com.cn/thread-495038-1-1.html这次是使用自己的服务器微信+MQTT服务器+ HTML5
这次给自己DIY一个微信排插，这样就可以躺在床上控制各种电器了。比如我控制我的普通台灯，风扇啥的。

上视频：

微信端配置不使用微信官方的控制面板，而是用自己服务器写的HTML5，填写自己的HTML5服务器地址

然后手机微信扫描绑定二维码，绑定设备
然后微信的设置里面打开设备就可以控制排插了

HTML5界面代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>物联网</title>
<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>
*, *:before,
*:after {
box-sizing: border-box;
}
html {
font-family: 'Roboto Condensed', sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 100%;
color: #ECEFF1;
background-image: radial-gradient(#4f6875, #263238);
}
.toggle {
position: relative;
display: block;
margin: 0 auto;
width: 150px;
height: 60px;
color: white;
outline: 0;
text-decoration: none;
border-radius: 100px;
border: 2px solid #546E7A;
background-color: #263238;
transition: all 500ms;
}
.toggle:active {
background-color: #1c2429;
}
.toggle:hover:not(.toggle--moving):after {
background-color: #455A64;
}
.toggle:after {
display: block;
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
line-height: 45px;
text-align: center;
text-transform: uppercase;
font-size: 20px;
color: white;
background-color: #37474F;
border: 2px solid;
transition: all 500ms;
}
.toggle--on:after {
content: 'On';
border-radius: 50px 5px 5px 50px;
color: #66BB6A;
}
.toggle--off:after {
content: 'Off';
border-radius: 5px 50px 50px 5px;
transform: translate(100%, 0);
color: #f44336;
}
.toggle--moving {
background-color: #1c2429;
}
.toggle--moving:after {
color: transparent;
border-color: #435862;
background-color: #222c31;
transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
}
h1 {
font-size: 64px;
margin-top: 0;
margin-bottom: 50px;
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<h1>排插</h1>
<a id="bt" class="toggle toggle--off" value='0'></a>
<script src="js/bmqtt.js"></script>
<script src='js/jquery.js'></script>
<script src="js/index.js"></script>
</body>
</html>

复制代码

JS代码
自己用的是MQTT来控制的

var client = mqtt.connect('ws://www.iotsj.cn:8083/mqtt'); // you add a ws:// url here
client.subscribe("/mqtt/rev");//订阅
client.on("message", function(topic, payload) {
// alert([topic, payload].join(": "));
});
client.publish("/mqtt/send", "g"); //发送
$('#bt').click(function(e) {
var toggle = this;
var k = $("#bt").attr('value');
if(k==0)
{
$(toggle).toggleClass('toggle--on').toggleClass('toggle--off').addClass('toggle--moving');
$("#bt").attr('value','1');
client.publish("/mqtt/send", "k");
}
if(k==1)
{
$(toggle).toggleClass('toggle--on').toggleClass('toggle--off').addClass('toggle--moving');
$("#bt").attr('value','0');
client.publish("/mqtt/send", "g");
}
setTimeout(function() {
$(toggle).removeClass('toggle--moving');
}, 200);
});

复制代码

MCU（esp8266）代码：

/* main.c -- MQTT client example
#include "ets_sys.h"
#include "driver/uart.h"
#include "osapi.h"
#include "mqtt.h"
#include "wifi.h"
#include "config.h"
#include "debug.h"
#include "gpio.h"
#include "user_interface.h"
#include "mem.h"
MQTT_Client mqttClient;
int temp=0;
void wifiConnectCb(uint8_t status)
{
if(status == STATION_GOT_IP){
MQTT_Connect(&mqttClient);
} else {
MQTT_Disconnect(&mqttClient);
}
}
void mqttConnectedCb(uint32_t *args)
{
MQTT_Client* client = (MQTT_Client*)args;
INFO("MQTT: Connected\r\n");
MQTT_Subscribe(client, "/mqtt/men", 0);
//MQTT_Publish(client, "/mqtt/topic/0", "hello0", 6, 0, 0);
}
void mqttDisconnectedCb(uint32_t *args)
{
MQTT_Client* client = (MQTT_Client*)args;
INFO("MQTT: Disconnected\r\n");
}
void mqttPublishedCb(uint32_t *args)
{
MQTT_Client* client = (MQTT_Client*)args;
INFO("MQTT: Published\r\n");
}
void mqttDataCb(uint32_t *args, const char* topic, uint32_t topic_len, const char *data, uint32_t data_len)
{
char *topicBuf = (char*)os_zalloc(topic_len+1),
*dataBuf = (char*)os_zalloc(data_len+1);
int i=0;
MQTT_Client* client = (MQTT_Client*)args;
os_memcpy(topicBuf, topic, topic_len);
topicBuf[topic_len] = 0;
os_memcpy(dataBuf, data, data_len);
dataBuf[data_len] = 0;
INFO("Receive topic: %s, data: %s \r\n", topicBuf, dataBuf);
// if(dataBuf[0]=='k')//排插指令--开
// {
// GPIO_OUTPUT_SET(GPIO_ID_PIN(5), 1);
// INFO("paicha is open ");
//
// }
// else if(dataBuf[0]=='g')//--关
// {
// GPIO_OUTPUT_SET(GPIO_ID_PIN(5), 0);
// INFO("paicha is close ");
// }
if(dataBuf[0]=='o')
{
GPIO_OUTPUT_SET(GPIO_ID_PIN(14), 1);//GPIO14输出低电平
INFO("meng k ai le");
}
else if(dataBuf[0]=='c')
{
GPIO_OUTPUT_SET(GPIO_ID_PIN(14), 0);//GPIO14输出低电平
INFO("meng is close ");
}
os_free(topicBuf);
os_free(dataBuf);
}
/******************************************************************************
* FunctionName : user_rf_cal_sector_set
* Description : SDK just reversed 4 sectors, used for rf init data and paramters.
* We add this function to force users to set rf cal sector, since
* we don't know which sector is free in user's application.
* sector map for last several sectors : ABCCC
* A : rf cal
* B : rf init data
* C : sdk parameters
* Parameters : none
* Returns : rf calf sector
*******************************************************************************/
uint32 ICACHE_FLASH_ATTR
user_rf_cal_sector_set(void)
{
enum flash_size_map size_map = system_get_flash_size_map();
uint32 rf_cal_sec = 0;
switch (size_map) {
case FLASH_SIZE_4M_MAP_256_256:
rf_cal_sec = 128 - 5;
break;
case FLASH_SIZE_8M_MAP_512_512:
rf_cal_sec = 256 - 5;
break;
case FLASH_SIZE_16M_MAP_512_512:
case FLASH_SIZE_16M_MAP_1024_1024:
rf_cal_sec = 512 - 5;
break;
case FLASH_SIZE_32M_MAP_512_512:
case FLASH_SIZE_32M_MAP_1024_1024:
rf_cal_sec = 1024 - 5;
break;
default:
rf_cal_sec = 0;
break;
}
return rf_cal_sec;
}
//定时器回调函数
void timer_callback(args)
{
uint32_t result;
result = GPIO_INPUT_GET(GPIO_ID_PIN(4));
if(result == 0x01)
{
MQTT_Publish(&mqttClient, "/mqtt/menrev", "kaimen", 6, 0, 0);
}
else
{
//MQTT_Publish(&mqttClient, "/mqtt/rev", "kaimen", 6, 0, 0);
}
}
void user_init(void)
{
//定义定时器结构体
LOCAL os_timer_t timer;
uart_init(115200,115200);
os_delay_us(1000000);
os_timer_disarm(&timer);//关闭定时器，相当于清零计时器计数
os_timer_setfn(&timer, (os_timer_func_t *)timer_callback, NULL);//初始化定时器
os_timer_arm(&timer, 5000, 1);//开始定时器计数,1000毫秒后，会调用前面的callback函数（后面的0表示只运行一次为1表示循环运行）
PIN_FUNC_SELECT(PERIPHS_IO_MUX_GPIO5_U, FUNC_GPIO5);//D1
GPIO_OUTPUT_SET(GPIO_ID_PIN(5), 0);
PIN_FUNC_SELECT(PERIPHS_IO_MUX_MTMS_U, FUNC_GPIO14);//D5 输出控制
GPIO_OUTPUT_SET(GPIO_ID_PIN(14), 0);//D5输出低电平默认不亮的
PIN_FUNC_SELECT(PERIPHS_IO_MUX_GPIO4_U, FUNC_GPIO4);//D2输入
GPIO_DIS_OUTPUT(GPIO_ID_PIN(4)) ; // 设置GPIO4为输入
CFG_Load();
MQTT_InitConnection(&mqttClient, sysCfg.mqtt_host, sysCfg.mqtt_port, sysCfg.security);
//MQTT_InitConnection(&mqttClient, "192.168.11.122", 1880, 0);
MQTT_InitClient(&mqttClient, sysCfg.device_id, sysCfg.mqtt_user, sysCfg.mqtt_pass, sysCfg.mqtt_keepalive, 1);
//MQTT_InitClient(&mqttClient, "client_id", "user", "pass", 120, 1);
MQTT_InitLWT(&mqttClient, "/lwt", "offline", 0, 0);
MQTT_OnConnected(&mqttClient, mqttConnectedCb);
MQTT_OnDisconnected(&mqttClient, mqttDisconnectedCb);
MQTT_OnPublished(&mqttClient, mqttPublishedCb);
MQTT_OnData(&mqttClient, mqttDataCb);
WIFI_Connect(sysCfg.sta_ssid, sysCfg.sta_pwd, wifiConnectCb);
INFO("\r\nSystem started ...\r\n");
}

复制代码

白丁

只能在局域网使用吗？

ihalin

白丁发表于 2017-5-4 21:19
只能在局域网使用吗？

已连接服务器的，4G，wifi都，用微信来控制的。

迈尔风随

naga568

wudianjun2001

很牛的东西啊

wo4fisher

wateras1

你这个服务器是自己买的还是申请的免费的呢？不错

ihalin

wateras1 发表于 2017-5-5 09:41
你这个服务器是自己买的还是申请的免费的呢？不错

腾讯云的学生机子

wateras1

ihalin 发表于 2017-5-5 09:54
腾讯云的学生机子

这个可以试用多久呢？有链接嘛？

sint27

ihalin

wateras1 发表于 2017-5-5 10:01
这个可以试用多久呢？有链接嘛？

不是试用的是1块钱一个月

贵在坚持

这个还要连接电脑的吗，你这块控制开关的板子是放在哪里，一起放在插座里的吗？

ihalin

贵在坚持发表于 2017-5-6 07:35
这个还要连接电脑的吗，你这块控制开关的板子是放在哪里，一起放在插座里的吗？

在插座里面

machinnneee

DavidZH

哟哟。6666666666666666666666666

caige

你好。请问我现在需要开发一个产品。用微信连接。需要使用自己的服务器吗？？、

superS

你加个好友吗，我最近在准备这个。有的地方不懂qq1156488130

superS

Mqtt你用的那个库

微信排插（自己搭建服务器HTML5） [复制链接]

最新回复

赞赏

点评

点评

点评

点评

点评

荣誉会员勋章