模擬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.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
<tr align="center">
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</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.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
</tr>
<tr align="center">
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</td>
<td>
<img src="img/small03.jpg"><br />
冬瓜<br />
<font color="red">$299.99</font>
</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> USERREGiSTER</span></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，效果如下：
