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):
1 2 3 4 5 6 7 | #! /bin/bash while [ true ] do echo "time from linux server:" $( date +%X) sleep 1 done exit 0 |
html(文件名show_time.html):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <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客户端。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?