多笑笑.png
手机居然可以控制电脑浏览器显示，一开始我也是吃了一惊，但就是可以的，而且只需要修改手机端的程序，不需要修改浏览器。基本原理是手机与浏览器通过socket 通信。
前言
这个东西最初我是看简书一个大神的文章知道的
http://www.jianshu.com/p/89ccae3e590b
《调试手机中数据库的福音：Android-Debug-Database》
文章介绍了老外的一个库Android-Debug-Database ，通过这个库，可以在浏览器显示与修改当前应用的数据库，sharepreferce等内容。这可刷新了我的世界观。在我的想象中，手机与电脑通信，起码要写两个软件，一个是手机端，一个电脑端的。结果，这个库，只需要写手机端的。我想，估计是浏览器已经是一个标准的客户端，手机只需要完成服务器的搭建即可。
下图是我通过手机，在电脑浏览器显示一段基本的html代码，酷炫得不行
浏览器显示.png
通信过程##
整个过程是手机作为服务器端，浏览器作为客户端。大概通信步骤如下
1.使电脑与手机位于同一局域网。实操就是直接用usb连接手机与电脑，并进行端口转发,将电脑端口9989的数据，转发到手机9989端口（当然你也可以用其他端口，要保证端口没有被占用）
adb forward tcp:9989 tcp:9989
2.手机开启一个socket，，指定手机端口9989监听客户端连接
mServerSocket = new ServerSocket(9989);
Socket socket = mServerSocket.accept();
3.浏览器向电脑端口9989 发送http请求，该请求被转发到手机的9989端口，通信连通。具体就是在浏览器输入一个网址http://localhost:9989/
3.连接后，手机返回html文件给浏览器，浏览器进行显示。
//返回html给浏览器
String route = "wenfeng.html";
reader = new BufferedReader(new InputStreamReader(socket.getInputStream()));
output = new PrintStream(socket.getOutputStream());
byte[] bytes;
bytes = loadContent(route, mAssets);
//把状态返回给浏览器
output.println("HTTP/1.0 200 OK");
output.println("Content-Type: " + "text/html");
output.println("Content-Length: " + bytes.length);
output.println();
output.write(bytes);
output.flush();
看看代码##
在oncreate开启socket，进行监听
public class MainActivity extends AppCompatActivity {
private ClientServer mclient;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mclient = new ClientServer(this,9989);
mclient.start(); //开启监听
}
}
连接成功后，把html文件返回给浏览器，并且返回状态码给浏览器。
public class ClientServer implements Runnable {
private static final String TAG = "ClientServer";
private final int mPort;
private boolean mIsRunning;
private ServerSocket mServerSocket;
private Context context;
public ClientServer(Context context, int port) {
mPort = port;
this.context=context;
}
public void start() {
Log.i("wenfeng","start");
mIsRunning = true;
new Thread(this).start();
}
@Override
public void run() {
try {
mServerSocket = new ServerSocket(mPort);
Log.i("wenfeng","wait for accept"); //等待连接
Socket socket = mServerSocket.accept();
handle(socket); //处理连接
} catch (SocketException e) {
// The server was stopped; ignore.
Log.i("wenfeng","SocketException",e);
} catch (IOException e) {
Log.i("wenfeng","IOException",e);
} catch (Exception ignore) {
}
}
public void handle(Socket socket) throws IOException {
BufferedReader reader = null;
PrintStream output = null;
try {
AssetManager mAssets = context.getResources().getAssets();
String route = "wenfeng.html";
output = new PrintStream(socket.getOutputStream());
byte[] bytes;
//装载wenfeng.html文件，用于返回给浏览器
bytes = loadContent(route, mAssets);
//返回服务器状态
output.println("HTTP/1.0 200 OK");
output.println("Content-Type: " + "text/html");
output.println("Content-Length: " + bytes.length);
output.println();
//返回数据
output.write(bytes);
output.flush();
} finally {
try {
if (null != output) {
output.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
//该函数用于装载html文件
public static byte[] loadContent(String fileName, AssetManager assetManager) throws IOException {
InputStream input = null;
try {
ByteArrayOutputStream output = new ByteArrayOutputStream();
input = assetManager.open(fileName);
byte[] buffer = new byte[1024];
int size;
while (-1 != (size = input.read(buffer))) {
output.write(buffer, 0, size);
}
output.flush();
return output.toByteArray();
} catch (FileNotFoundException e) {
return null;
} finally {
try {
if (null != input) {
input.close();
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
}
例子的传送门，可以体验一下。
https://github.com/wenfengtou/RubbishDemo
日更中，欢迎关注。
网友评论