websocketj--随时随地在Web浏览器中操作你的服务端程序

0 - 有没有觉得Linux标准终端界面输入输出枯燥无味？

1 - 什么？vmstat命令的输出数据不直观？有没有想过能够可视化该命令的输出？

2 - 尝试过用浏览器操作Windows中的cmd吗？

websocketj可以解决以上所有问题，让你随时随地通过浏览器访问任何平台上的应用程序。

• websocketj是什么？
• 如何使用websocketj？
• websocketj是如何工作的？
• 在浏览器中远程操作Windows中的cmd
• 在浏览器中可视化Linux中vmstat命令的输出
• 待完善功能
• 站在巨人肩上
• 如何编译源码

Fork websocketj on github

websocketj是什么？

看名字就知道它跟WebSocket有关，简言之，websocketj能够将服务端程序的标准输入输出（STDIN和STDOUT）重定向到远程支持WebSocket协议的浏览器中。

程序的标准输出会被当作message发送到远端的浏览器，来自远端浏览器中的任何数据都会被当作程序的标准输入。不管你的服务端程序使用什么语言编写，只要你的程序支持STDIN和STDOUT，那么websocketj就可以很好地工作。Java、python、C、C#、Ruby、Swift、Go反正whatever else！

websocketj除了是一个WebSocket服务器，可以接收websocket client连接之外，还是一个静态web服务器，可以处理一些常见的静态资源请求，比如html、js、css以及图片之类的。websocketj由Java编写实现，实现代码结构简单，不依赖其他组件，更不需要tomacat、nginx之类的东西，自己完全独立运行。Strong!

如何使用websocketj？

说了这么多，那么该如何使用websocketj呢？使用起来也相当简单，下面是使用websocketj的步骤：

• Step1：开发你的服务端程序，不受语言限制，但是必须支持标准输入输出（STDIN和STDOUT）；
• Step2：开发你的前端程序，也就是html/css/js之类的，编写WebSocket Client连接代码，接收服务端的数据，如果有必要，还需要将用户的输入发送给服务器；
• Step3：将你的前端程序文件（html等）放到服务器（比如Linux）的某个目录中，这里以‘usr/local/websocketj/html’为例，其他平台类似；
• Step4：启动websocketj，指定启动参数：‘websocketj --wsport=8081 --ssport=8082 --staticDir=/usr/local/websocketj/html/ yourprogram args...’；
• Step5：打开浏览器，在地址栏中输入http://ip:8082/，会出现一个默认首页，websocketj启动成功了！

下面是启动参数说明：

--wsport：WebSocket服务器的工作端口号；

--ssport：静态web服务器的工作端口号；

--staticDir：静态资源存放的目录，类似tomacat的webapps目录，存放一些静态文件，比如html、css以及js等，可以通过--ssport端口访问它；

Yourprogram args：你编写的支持STDIN和STDOUT服务端程序，后面可以携带参数。这跟正常启动命令行类似。

NOTE：正常启动websocketj之后，访问8082端口（比如http://192.168.3.73:8082/）可以看到websocketj自带的默认首页。

websocketj是如何工作的？

websocketj类似一个处于浏览器和应用程序之间的桥梁，它能够hook程序的inputstream和outputstream，使用WebSocket技术将这两个stream重新定向到远程的web浏览器。

整个结构非常简单，一看就懂。下面举一个简单的例子，服务端使用bash shell编写一个定时输出系统时间的脚本，前端创建一个html文件，编写js使用WebSocket实时接收shell脚本的输出，并将其显示在浏览器页面中。

bash shell（文件名show_time）：

#! /bin/bash
while [ true ]
do
echo "time from linux server:"$(date +%X)
sleep
done
exit 

html（文件名show_time.html）：

<script>
    // helper function: log message to screen
    function print_log(msg) {
        document.getElementById('msg').textContent = msg;
    }

    function print_output(output) {
        document.getElementById('output').textContent = output;
    }

     // setup websocket with callbacks
     var host = "ws://192.168.3.246:8081/";
     var ws = new WebSocket(host);
     ws.onopen = function() {
         print_log("Connected To WebSocket Server: => " + host);
     };
     ws.onclose = function() {
         print_log('Disconnected');
     };
     ws.onmessage = function(event) {
         print_output(event.data);
     };
</script>    

将show_time.html文件放在linux某个目录中，启动websocketj：websocketj --wsport=8081 --ssport=8082 --staticDir=/usr/local/websocketj/html ./show_time。然后在浏览器中访问http://192.168.3.246:8082/show_time.html，页面中实时显示Linux中的时间，该text来自于bash shell脚本的STDOUT。

在浏览器中操作Windows中的cmd

这里以我电脑上Windows 10中安装的git cmd为例子，演示如何在浏览器中操作git cmd client。由于这里我们直接使用现有的git cmd程序，所以不需要再编写服务端程序，只需要编写前端html页面来接收输出和模拟输入。html（git_cmd.html）页面在此省略，将该git_cmd.html文件放在windows某个目录中E:\codes\git\websocketj\html，启动websocketj：websocketj --wsport=8081 --ssport=8082 --staticDir=E:\codes\git\websocketj\html C:\Program Files\Git\git-cmd.exe。然后在浏览器中访问http://192.168.3.74:8082/git_cmd.html，输入git命令，得到输出：

在浏览器中可视化Linux中vmstat命令的输出

在Linux中有一个命令来监控系统资源使用情况，比如CPU、网络等。执行‘vmstat 1’命令，程序会在控制台终端中每隔1秒输出当前系统状态：

现在我们使用websocketj将以上输出重定向到浏览器中，并在浏览器中使用js控件将这些数据可视化显示。由于这里我们使用现成的Linux命令（vmstat 1），因此不需要我们编写服务端程序，只需要前端html显示文件即可。这里前端我使用了第三方js控件，专门用来可视化这种监控型的数据：http://smoothiecharts.org/。具体代码就不放这这里了，感兴趣可以点击官网。下面是最终效果图：

待完善功能

目前能想到以下功能可以完善：

（1）支持前端随机启动指定服务端程序。目前只能启动一个程序，并且是在websocketj启动的时候当作参数传进去的，所有连接的前端只能看到这一个程序的输入输出；完善后可以在前端指定要打开的程序，不同的前端关联不同的输入输出；

（2）前端在进行WebSocket连接时，需要认证。目前所有连接均可接入并关联到程序的输入输出，完善后，只有授权后的连接可以介入。

（3）waiting your passion and brightness.

欢迎各种PR和Issues，Fork websocketj on github

站在巨人肩上

前面一直说这个东西非常简单，你以为真的吗？非也，WebSocket这块采用了第三方开源WebSocket库，详细源码参见这里：https://github.com/TooTallNate/Java-WebSocket。这个开源库可以非常简单地创建WebSocket服务器可以WebSocket客户端。

import java.net.InetSocketAddress;
import org.java_websocket.WebSocket;
import org.java_websocket.handshake.ClientHandshake;
import org.java_websocket.server.WebSocketServer;

public class SimpleServer extends WebSocketServer {
    public SimpleServer(InetSocketAddress address) {
        super(address);
    }

     @Override
     public void onOpen(WebSocket conn, ClientHandshake handshake) {
         conn.send("Welcome to the server!"); //This method sends a message to the new client
         broadcast( "new connection: " + handshake.getResourceDescriptor() ); //This method sends a message to all clients connected
         System.out.println("new connection to " + conn.getRemoteSocketAddress());
     }
     @Override
     public void onClose(WebSocket conn, int code, String reason, boolean remote) {
         System.out.println("closed " + conn.getRemoteSocketAddress() + " with exit code " + code + " additional info: " + reason);
     }
     @Override
     public void onMessage(WebSocket conn, String message) {
         System.out.println("received message from "    + conn.getRemoteSocketAddress() + ": " + message);
     }
     @Override
     public void onMessage( WebSocket conn, ByteBuffer message ) {
         System.out.println("received ByteBuffer from "    + conn.getRemoteSocketAddress());
     }
     @Override
     public void onError(WebSocket conn, Exception ex) {
         System.err.println("an error occured on connection " + conn.getRemoteSocketAddress()  + ":" + ex);
     }
     @Override
     public void onStart() {
         System.out.println("server started successfully");
     }
     public static void main(String[] args) {
         String host = "localhost";
         int port = 8887;

         WebSocketServer server = new SimpleServer(new InetSocketAddress(host, port));
         server.run();
     }
 }

代码风格和JS一致，用起来非常方便。除了服务端之后，用它还可以快速创建WebSocket客户端，这样你就可以模拟浏览器进行WebSocket连接了。另外，细心的朋友可能会发现，websocketj是模仿另外一个Go语言版本的websocketd，参见这里：https://github.com/joewalnes/websocketd/。这个功能更多，我只是看了一下websocketd的功能，至于实现，并没有参考，对于WebSocket这块，它也是引用的第三方开源库Go语言版本。

如何编译源码

使用git clone命令将源码clone到本地硬盘目录后，

Windows：

直接使用eclipse导入maven项目；

Linux：

Linux编译和运行比较麻烦，需要增加-Djava.ext.dirs=参数引用jar包，并且只需要编译根目录中sources.build这个文件，里面存放各种源文件列表。

Linux中编译：javac -Djava.ext.dirs=../libs/ @sources.build

Linux中运行：java -Djava.ext.dirs=../libs/ -classpath ./src/main/java/ com.zhzhi.websocketj.App --wsport=8081 --ssport=8082 --staticDir=../html/ vmstat 1