模拟Browser/Servers服务器
模拟网站服务器，使用浏览器访问自己编写的服务端程序，查看网页效果。
案例分析
准备页面数据
创建index.html文件，文件内容如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>itheima商城title>
head>
<body>
<table width="1600px" align="center">
<tr>
<td><img src="img/logo2.png">td>
<td><img src="img/header.jpg">td>
<td>
<a href="#">登录a>
<a href="#">注册a>
<a href="#">购物车a>
td>
tr>
<tr bgcolor="black" height="40px">
<td colspan="3">
<a href="#">首页a>
<a href="#">手机数码a>
<a href="#">电脑办公a>
<a href="#">电脑办公a>
td>
tr>
<tr>
<td colspan="3"><img src="img/1.jpg" width="">td>
tr>
table>
<h1 align="center">热门商品 <img src="img/title2.jpg">h1>
<table width="1600px"align="center">
<tr align="center">
<td rowspan="2"><img src="img/big01.jpg">td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td >
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
tr>
table>
<table align="center" width="100%"><tr><td align="center"><img src="img/ad.jpg" align="center" />td>tr>table>
<table width="1600px"align="center">
<tr align="center">
<td rowspan="2"><img src="img/big01.jpg">td>
<td colspan="3">
<img src="img/middle01.jpg" />
td>
<td >
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
tr>
<tr align="center">
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99font>
td>
tr>
table>
<table width="1024px" align="center">
<tr align="center">
<td> <img src="img/footer.jpg">td>
tr>
<tr align="center"><td>
<a href="#">关于我们a>
<a href="#">关于我们a>
<a href="#">关于我们a>
<a href="#">关于我们a>
<a href="#">关于我们a>
<a href="#">关于我们a>
td>
tr>
table>
body>
html>
创建reg.html文件，文件内容如下：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面title>
<style type="text/css">
/*页面整体背景图*/
body{
background-image: url(img/bg.jpg);
}
/*
* 外层白色背景
*/
.formId{
width: 700px;
height: 500px;
border: 1px solid #333;
margin: 150px auto;
background-color: #FFFFFF;
padding-top: 30px;
padding-left:150px;
}
/*
* 表单注册区域
*/
.formReg{
width: 500px;
height: 450px;
border: 0px solid #333;
}
h3{
color: #0000FF;
font-size: 20px;
}
h3 span{
color: #000000;
font-size:16px;
}
tr{
height: 35px;
}
.in{
width: 200px;
height: 30px;
margin-left: 10px;
}
style>
head>
<body>
<div class="formId">
<div class="formReg">
<h3>用户注册 <span> USERREGiSTERspan>h3>
<form action="#" method="get">
<table width="500px">
<tr>
<td align="right">用户名td>
<td colspan="2"><input class="in" name="username" placeholder="请输入用户名"/>td>
tr>
<tr>
<td align="right">密码td>
<td colspan="2"><input class="in" type="password" name="password" placeholder="请输入用密码"/>td>
tr>
<tr>
<td align="right">性别td>
<td colspan="2">男<input type="radio" name="sex" checked="checked"/>
女<input type="radio" name="sex">td>
tr>
<tr>
<td align="right">验证码td>
<td><input type="text" name="code">td>
<td><img src="img/checkcode.jpg">td>
tr>
<tr>
<td colspan="3" align="center">
<input type="image" src="img/btn.jpg" />
td>
tr>
table>
form>
div>
div>
body>
html>
图片可以自行准备，不过没图片也可以，只是浏览效果没这么好。
模拟服务器端
ServerSocket类监听端口，使用浏览器访问http://localhost:8000/web/index.html
访问前，应该先开启服务器端。
代码实现：
- 第1步：建立连接
// 创建服务端ServerSocket，监听端口为8000 ServerSocket serverSocket = new ServerSocket(8000); // 建立连接 Socket accept = serverSocket.accept();
- 第2步：获取字符缓冲输入流
// 创建流对象 // 获取网络字节输入流 InputStream is = accept.getInputStream(); // 将网络字节输入流转换为网络字符输入流 InputStreamReader isr = new InputStreamReader(is); // 传入网络字符输入流，获取字符缓冲输入流 BufferedReader br = new BufferedReader(isr);
- 第3步：读取浏览器的请求信息（包含html文件路径）
// 读取浏览器的请求消息 // 把客户端请求信息的第一行取出来：GET /web/index.html HTTP/1.1 String request = br.readLine(); // 取出请求资源的路径：/web/index.html // 把读取的信息进行切割，只要中间的部分：/web/index.html String[] strArr = request.split(" "); // 获取数组的第二个元素，得到：/web/index.html String path = strArr[1];
- 第4步：创建本地输入流对象
// 根据得到的路径：web/index.html // 创建本地字节输入流对象，构造方法中绑定要读取的html路径：/web/index.html FileInputStream fis = new FileInputStream(path);
- 第5步：获取网络字节输出流
// 获取网络字节输出流，将文件写回客户端：Browser——浏览器端 OutputStream out = accept.getOutputStream();
- 第6步：写入HTTP响应头
// 写入HTTP协议响应头，固定写法 out.write("HTTP/1.1 200 OK\r\n".getBytes()); out.write("Content‐Type:text/html\r\n".getBytes()); // 必须要写入空行，否则浏览器不解析 out.write("\r\n".getBytes());
- 第7步：将服务端读取的HTML文件回写到客户端——浏览器端
// 一读一写复制文件，将服务端读取的html文件回写到客户端 byte[] bytes= new byte[1024]; int len = 0 ; while((len = fis.read(bytes)) != -1){ out.write(bytes, 0, len); }
- 第8步：释放资源
// 释放资源 fis.close(); out.close(); br.close(); accept.close(); serverSocket.close();
所有代码：
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.FileInputStream; import java.io.OutputStream; import java.net.ServerSocket; import java.net.Socket; public class BrowserServer { public static void main(String[] args) throws IOException { System.out.println("服务端 启动 , 等待连接 .... "); method(); } private static void method() throws IOException { ServerSocket serverSocket = new ServerSocket(8000); Socket accept = serverSocket.accept(); InputStream is = accept.getInputStream(); InputStreamReader isr = new InputStreamReader(is); BufferedReader br = new BufferedReader(isr); String request = br.readLine(); String[] strArr = request.split(" "); String path = strArr[1]; FileInputStream fis = new FileInputStream(path); OutputStream out = accept.getOutputStream(); out.write("HTTP/1.1 200 OK\r\n".getBytes()); out.write("Content‐Type:text/html\r\n".getBytes()); out.write("\r\n".getBytes()); byte[] bytes= new byte[1024]; int len = 0 ; while((len = fis.read(bytes)) != -1){ out.write(bytes, 0, len); } fis.close(); out.close(); br.close(); accept.close(); serverSocket.close(); } }
运行服务器端，然后用浏览器访问http://localhost:8000/web/index.html，效果如下：