websocketj--随时随地在Web浏览器中操作你的服务端程序
0 - 有没有觉得Linux标准终端界面输入输出枯燥无味?
1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出?
2 - 尝试过用浏览器操作Windows中的cmd吗?
websocketj可以解决以上所有问题,让你随时随地通过浏览器访问任何平台上的应用程序。
- websocketj是什么?
- 如何使用websocketj?
- websocketj是如何工作的?
- 在浏览器中远程操作Windows中的cmd
- 在浏览器中可视化Linux中vmstat命令的输出
- 待完善功能
- 站在巨人肩上
- 如何编译源码
看名字就知道它跟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的步骤:
- 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类似一个处于浏览器和应用程序之间的桥梁,它能够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 1 done exit 0
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 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中有一个命令来监控系统资源使用情况,比如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