浏览器与web服务端连接返回不同数据信息(html和图片)的解析和代码(python)_web服务器带图像的html响应

需求：

浏览器与服务端进行连接，服务端根据不同的资源路径返回不同的内容（html 或者图片）

分析：

浏览器和服务端进行连接服务端的代码步骤？如何获取不同的资源路径并根据路径在服务器上进行查找？怎么获取响应体的内容进行返回到浏览器？获取到的图片内容是什么类型？进行多次连接时循环应该从哪里开始？

知识点：

1.浏览器与服务端进行通信服务端的代码步骤（参考客户端和服务端通信的步骤）：

①建立一个服务端socket对象（导入socket模块）
②绑定服务端ip和端口
③设置监听（设置监听后现有的socket对象无法再进行通信）
④等待客户端连接，使用服务端socket对象的accept方法，返回结果为一个新的socket对象和一个ip+端口号。
⑤接受浏览器的请求报文
⑥向浏览器发送数据（响应报文格式）
⑦关闭socket(实际上浏览器通信结束会自动中断通信）

2.请求报文的格式：

请求行：请求方式+资源路径+协议版本 \r\n
请求头：基本信息，键值对 \r\n
空行：\r\n
请求体：内容 \r\n( \r\n可省略，post方式没有请求体）

3.响应报文的格式：

响应行：协议版本+ 状态码+状态描述信息 \r\n
响应头：服务器信息，键值对 \r\n
空行：\r\n
响应体：内容 \r\n( \r\n可省略）

4.socket进行监听后就无法再建立通信了，所以当浏览器与服务端进行连接时，调用socket的accept方法，返回一个新的socket对象和ip+端口号，利用拆包获取socket对象。

5.接收和发送数据都需要进行解码和编码，每次通信的解码和编码方式需要保持一致。unicode（万国码utf8...) 和 gbk(国标码) 都兼容ascii码 前128位就是ascii码的前128位。

6.服务端接收到浏览器的内容为请求报文，想要获取到不同的资源路径，需要对解码后的字符内容进行split切割和切片。

7.服务端向浏览器发送的数据为响应报文，响应体里面的内容通过文件操作获取到。如果想获取html中的数据内容就读取其中的数据,所有编程语言的源代码文件都是纯文本文件。如果想返回图片信息,我们需要读取图片数据,图片是二进制文件，我们需要使用rb进行读取。

8.浏览器和web服务端进行多次通信时，每次需要重新建立连接创建一个新的socket对象。因浏览器的特性（底层已经调用过close方法），每次通信完成后会自动中断连接，可以不手动中断连接。但为了安全，可写上。（参考文件的打开和关闭，每次操作完成后文件对象会自动释放掉，但存在异常时，可能出现占用内存资源文件无法关闭的情况。）

9.URL：协议 + 域名（ip+端口号）+ 资源路径 + 参数（可选）

代码：

# 返回不同资源路径返回数据
# 浏览器每次通信结束会自动中断连接，但是为了安全起见，可以手动关闭socket连接
# 自己写的服务端和客户端,通信结束后不会自动结束连接，需要手动关闭
# 不同资源路径返回数据(html和图片）
 
import socket
 
# 建立socket
web_server_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
# 绑定ip和端口号
web_server_socket.bind(('127.0.0.1', 8888))
# 设置监听,设置监听数量为128
web_server_socket.listen(128)
 
while True:
    # 接收浏览器连接,拆包
    browser_socket, ip_port = web_server_socket.accept()
    # 获取浏览器的请求报文，参数为接收的字节数，进行解码
    recv_data = browser_socket.recv(1024 * 8).decode()
    # 获取资源路径
    # 字符信息我们就可以使用字符串的处理方式
    # split如果什么也不写,则按照空白进行拆分(空白包括空格 \t \n 以及他们的自由组合)
    # html/gdp.html
    source_path = recv_data.split()[1][1:]
    # 向浏览器发送数据-响应报文
    response_line = 'HTTP/1.1 200 请求成功，服务器响应\r\n'
    response_head = 'key:value\r\n'
    # 根据获取到的路径在服务器上进行查找
    # 根据html 和image进行判断判断返回的数据是图片还是html
    if 'html' in source_path:
        # 如果想获取html中的数据内容就读取其中的数据,所有编程语言的源代码文件都是纯文本文件
        f = open(source_path, 'r', encoding='utf8')
        response_body = f.read()
        f.close()
 
        send_data = response_line + response_head + '\r\n' + response_body
        browser_socket.send(send_data.encode())
 
    elif 'image' in source_path:
        # 如果想返回图片信息,我们需要读取读片数据,图片是二进制文件我们需要使用rb进行读取
        f = open(source_path, 'rb')
        response_body = f.read()
        f.close()
 
        send_data = response_line + response_head + '\r\n'
        browser_socket.send(send_data.encode() + response_body)
 
    else:
        response_body = '<h1>未找到该页面</h1>\r\n'
        send_data = response_line + response_head + '\r\n' + response_body
        browser_socket.send(send_data.encode('gbk'))
 
    # 关闭socket
    browser_socket.close()
 
# 关闭服务器socket
# web_server_socket.close()