用react+mqtt重写终端远程广告机：cowsay

一、背景

cowsay 是一个很经典的命令行程序。它唯一的作用，就是用一个字符牛的形式，去广而告之。

经典的用法，是当一个人出去办事时，就使用cowsay写一句留言。

比如，当你暂时离开工位的时候，你可以告诉别人你马上回来：

如果玩过 cowsay 的朋友，一下子就能看出这个图是山寨的。是的，这是我开发的，并非原版。

cowsay 还可以用于广告（广而告之的意思，并非那种商业广告）。比如，你可以写个监控程序，监控你的博客是否挂掉了，然后以cow的方式给say出来。

相比之下，这种效果就比传统监控界面有意思得多。

另外，有很多人，有很多没有安装桌面的系统。这些系统有些是老电脑，闲置起来纯属浪费。但又不能做什么，因此可以做终端广告机。

二、实现过程

技术栈没什么难的，用到了如下开源项目。

1、chalk

chalk是一个让命令行可以显示彩色字符的js库。

2、mqtt

主要用到订阅模式

3、react-cli-renderer

命令行的react渲染工具

4、react

5、babel

实现对es6和jsx的支持

三、源代码

因为比较简单，所以直接贴源码。

import ReactCLI, { Section } from "react-cli-renderer";
import React from "react";
import chalk from "chalk";
import mqtt from 'mqtt';

class MyReactCLIApp extends React.Component {
  state = {
    say: 'loading'
  };

  componentDidMount() {
    let that=this;
    let client  = mqtt.connect('mqtt://mqtt.eclipse.org')

    client.on('connect', function () {
      client.subscribe('cowsay', function (err) {
        if (!err) {
          client.publish('cowsay', 'Hello mqtt')
        }
      })
    })

    client.on('message', function (topic, message) {
      that.setState({ say: message.toString() })
      // client.end()
    })
  }

  render() {
    return (
      <Section border={{ horizontal: "-", vertical: "|" }} align="center">
        <Section align="left">
          {chalk.black(`----------`)}{chalk.yellow(`${this.state.say}`)}<br/>
          {/* {chalk.black(`----------`)}{chalk.yellow(`---------------------`)}<br/> */}
          {chalk.black(`----------------`)}{chalk.yellow(`\\`)}{chalk.black(`--`)}{chalk.yellow(`^__^`)}<br/>
          {chalk.black(`-----------------`)}{chalk.yellow(`\\  (oo)\\_______`)}<br/>
          {chalk.black(`-------------------`)}{chalk.yellow(`(__)\\`)}{chalk.black(`-------`)}{chalk.yellow(`)\\/\\`)}<br/>
          {chalk.black(`-----------------------`)}{chalk.yellow(`||----w |`)}<br/>
          {chalk.black(`-----------------------`)}{chalk.yellow(`||`)}{chalk.black(`-----`)}{chalk.yellow(`||`)}<br/>
        </Section>
      </Section>
    );
  }
}

ReactCLI(<MyReactCLIApp />);

四、效果

使用MQTTX客户端，发布cowsay订阅的主题，即可实现让远程终端机显示输入的内容。

最后，github位于： github.com/codetyphon/…