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

时间:2023-12-25 10:20:25

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

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

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

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

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

Fork websocketj on github

websocketj是什么?

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

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

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

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

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

如何使用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--随时随地在Web浏览器中操作你的服务端程序

websocketj是如何工作的?

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

websocketj--随时随地在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命令,得到输出:

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

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

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

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

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

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

待完善功能

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

(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