从零开始带你手撸web服务

本文先用一个实例详细讲解了web请求与响应的具体过程并说明了web应用的本质，然后带大家由浅入深地手写了几个不同需求下的web服务端程序，帮助大家从底层理解服务端对web请求的处理过程以及web服务的运行原理，最后介绍了如何使用Python的wsgiref模块实现web请求与响应的处理。

web应用的本质

客户端-服务器模型

其实，对于所有的Web应用来说，从本质上讲我们运行web应用程序的地方就是一个socket服务端，而用户的浏览器就是一个socket客户端，我们可以使用Python的socket模块自己实现一个简单的带并发效果的web服务端: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import socket
from threading import Thread

def run_server(conn):
    msg = conn.recv(65105).decode('utf-8')
    # 打印浏览器的请求信息
    print(msg)
    #需要先根据协议向浏览器发送响应的内容
    conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
    conn.sendall(b'Hello WHW!')
    conn.close()

if __name__ == '__main__':
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8990))
    server.listen()
    #建立连接循环
    #由于HTTP是无连接的协议，因此这里必须加连接循环
    while 1:
        conn,_ = server.accept()
        t = Thread(target=run_server,args=(conn,))
        t.start()

这里，我们可以看到，在接收到浏览器的请求127.0.0.1:8990后，这个服务器端首先给浏览器（客户端）发送了一个200 OK的HTTP响应信息，然后发送了字符串Hello WHW!。
我们先运行这个程序然后在浏览器输入：localhost:8990,就可以看到服务器发送出的这个“Hello WHW!”字符串：

1
Hello WHW!

这里解释一下我们给浏览器发送Hello WHW之前：conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')的意思：
socket是应用层和传输层之间的抽象层，每一层都有协议，所谓的协议协议其实就是固定的消息格式，传输层的消息格式socket已经帮我们封装好了，但是应用层的协议还是需要开发者遵守的，所以在给浏览器发送消息的时候，如果没有按照应用层的消息格式来写，那么你返回给浏览器的信息，浏览器是没法识别的。
而我们web开发用到的应用层的协议都是HTTP协议，所以我们按照HTTP协议规定的消息格式来给浏览器返回消息时浏览器是可以识别的！也就是说，“200 OK”那一行的数据是在告诉浏览器，“请接收并输出我下面发来的数据”，而其实这句话也可以合在一起写：

1
conn.sendall(b'HTTP/1.1 200 OK \r\n\r\nHello WHW!')

其实上面这些还涉及到HTTP协议的版本以及报文格式的问题；还有我们上面的程序其实还打印了浏览器的请求信息：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
GET / HTTP/1.1
Host: 127.0.0.1:8990
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.108 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
Cookie: csrftoken=OkwsxAS7MZYJB8jz6QZMZI5bGANdSDONk2TUFLbfxHVl0xbKPtvwwm7XGIF7hSM0


# 。。。 其他请求信息

由于本文篇幅有限这里就不一一详细展开说明了，大家有兴趣的话请参考这篇文章：关于HTTP协议，一篇就够了
接着，我们在函数run_server的第二个conn中加上有样式效果的字符串： 

1
conn.sendall(bytes('<h1 style="background-color:red;">Hello WHW!',encoding='utf-8'))

再看看浏览器的返回结果，上面的样式生效了：
111
也就是说，浏览器自动将服务器发送给它的字符串按照一定的规则呈现出对应的效果！

web应用本质揭示

（1）当浏览器作为客户端与运行web程序的服务器端进行交互的时候，服务器给浏览器返回的是“字符串”； （2）如果这些“字符串”中有浏览器能够识别的格式，那么浏览器会自动的将这些包含在字符串中的格式解析成用户看着舒服的“效果”；
（3）而要想在浏览器实现我们想要的效果，我们就必须去学习浏览器都有哪些规则；
（4）我们可以将服务器端send的内容先写进一个文件里，然后将这个文件的内容读出来再发给浏览器，而这个文件，大家“约定俗成”的将其命名成后缀为.html的文件，也就是大家熟悉的html文件。
所以从web开发者的角度讲，我们需要做的事情大致有以下两点：
（1）按照Html的规则编写Html文件——充当模板
（2）从数据库中获取数据，然后替换到Html文件的数据位置——需要学习web框架

手写web服务

了解了web应用的本质后，接下来带大家一步步地手写web服务！

返回html文件的web框架

上面说到了，如果返回的内容比较多的话，在服务端我们可以将一个html文件返回给浏览器。
准备工作：新建一个html文件:index.html，从本地找到一个图片1.jpg与一个图标文件favicon.ico,并且创建一个css文件存放css样式。
index.html文件的内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入本地的ico文件-->
    <link rel="=icon" href="favicon.ico">
    <!-- 引入本地css文件 -->
    <link rel="stylesheet" href="whw.css">
</head>
<body>
<h1 class="content">你好！世界！</h1>
<div class="d1">
    <!--引入本地的图片-->
    <img src="1.jpg" alt="">
</div>
<script>
    alert('你好世界！')
</script>
</body>
</html>

server端的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import socket
from threading import Thread

def run_server(conn):
    msg = conn.recv(65105).decode('utf-8')
    print(msg)
    #需要先根据协议向浏览器发送响应的内容
    conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
    with open('index.html','rb')as f:
        data = f.read()
        conn.sendall(data)
    conn.close()

if __name__ == '__main__':
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8991))
    server.listen()
    #建立连接循环
    #由于HTTP是无连接的协议，因此这里必须加连接循环
    while 1:
        conn,_ = server.accept()
        t = Thread(target=run_server,args=(conn,))
        t.start()

whw.css文件中的内容如下：

1
2
3
.content{color:red;}
.d1{width:123px;height:123px;}
img{width:100%;height:100%;}

我们在浏览器中输入127.0.0.1:8991看一下结果:
alert弹窗与h1标签自带的效果都有，但是网页中没有显示图片与ico图标，css定制的样式也没有呈现！
这是因为：弹窗与h1标签的效果我们随着html文件发送给了浏览器，但是图片、图标与css文件还在server本地，并没有发送给浏览器，浏览器渲染不出来！
其实针对html文件“引用”的静态文件，浏览器会额外发送相应的请求的，看一下Network中的信息大家就明白了：
222
也就是说：获取index页面浏览器发送请求127.0.0.1:8991，但是想要获取index页面中的静态文件的话，浏览器会在前面的请求的基础上加上静态文件的名字再向服务器“索取”对应位置的静态文件！
其实这些和标签的属性有有关系，css文件是link标签的href属性：<link rel="stylesheet" href="test.css">，js文件是script标签的src属性：<script src="test.js"></script>，图片文件是img标签的src属性：<img src="meinv.png" alt="" width="100" height="100"> ，图标ico文件是link标签的属性：<link rel="icon" href="whw.ico">，其实这些属性都会在页面加载的时候，单独到自己对应的属性值里面取请求对应的文件数据，而且我们如果在值里面写的都是自己本地的路径，那么都会来自己的本地路径来找，如果我们写的是相对路径，就会到我们自己的网址+文件名称，这个路径来找它需要的文件，所以我们只需要在服务接收到这些请求后做出对应的响应，就可以将相应的文件发送给浏览器了！

返回静态文件的web应用

既然浏览器可以根据link标签的href、img标签的src、script标签的src后面的值向服务器端请求对应的文件，那我们完全可以根据这些请求信息将对应为文件发送给浏览器，这样浏览器拿到我们发给它的文件后进行渲染，就可以展现出对应的效果了！对应的服务端程序我们可以这样来写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import socket
from threading import Thread

def run_server(conn):
    msg = conn.recv(65105).decode('utf-8')
    # print(msg)
    # 通过http协议我们知道，浏览器请求的时候，有一个请求内容的路径，
    # 通过对请求信息的分析，这个路径我们在请求的所有请求信息中可以提炼出来，下面的path就是我们提炼出来的路径
    path = msg.split('\r\n\r\n')[0].split()[1]
    print('path>>>:',path)
    #需要先根据协议向浏览器发送响应的内容
    conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
    #根据不同的路径返回响应的内容
    #返回html文件
    if path == '/':
        with open('index.html','rb')as f:
            data = f.read()
            conn.sendall(data)
            conn.close()
    #返回ico文件是固定的
    #注意图标必须叫favicon.ico
    if path == '/favicon.ico':
        with open('favicon.ico','rb')as f:
            data = f.read()
            conn.sendall(data)
            conn.close()
    #返回图片文件
    if path == '/1.jpg':
        with open('1.jpg','rb')as f:
            data = f.read()
            conn.sendall(data)
            conn.close()
    # 返回css文件
    if path == '/whw.css':
        with open('whw.css','rb')as f:
            data = f.read()
            conn.sendall(data)
            conn.close()

if __name__ == '__main__':
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8991))
    server.listen()
    #建立连接循环
    #首先浏览器相当于给我们发送了多个请求，一个是请求我们的html文件，
    #而我们的html文件里面的引入文件的标签又给我们这个网站发送了请求静态文件的请求，
    #所以我们要将建立连接的过程循环起来，才能接受多个请求
    while 1:
        conn,_ = server.accept()
        t = Thread(target=run_server,args=(conn,))
        t.start()

这时我们再在浏览器中输入127.0.0.1:8991就可以展示图、图标与效果了！

优化一

我们可以使用函数与映射的方式优化一下上面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# -*- coding:utf-8 -*-
import socket

def index(conn):
    with open('index.html','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()

def ico(conn):
    with open('favicon.ico','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()

def img(conn):
    with open('1.jpg','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()

def css(conn):
    with open('whw.css','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()
        

if __name__ == '__main__':
    # 处理的函数列表
    opt_lst = [
        ('/',index),
        ('/favicon.ico',ico),
        ('/1.jpg',img),
        ('/whw.css',css),
    ]
    # 初始化socket
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8991))
    server.listen()
    while 1:
        conn,addr = server.accept()
        msg = conn.recv(65105).decode('utf-8')
        # print(msg)
        #获取path
        path = msg.split('\r\n\r\n')[0].split()[1]
        # 先发送响应的协议
        conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
        #根据不同的路径调用相应的函数
        for i in opt_lst:
            if path == i[0]:
                i[1](conn)
优化二

当然可以专门为每个传文件的函数开多线程提高效率，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
# -*- coding:utf-8 -*-
import socket
from threading import Thread

def index(conn):
    with open('index.html','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()

def ico(conn):
    with open('favicon.ico','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()

def img(conn):
    with open('1.jpg','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()
        
def css(conn):
    with open('whw.css','rb')as f:
        data = f.read()
        conn.sendall(data)
        conn.close()
        
def handle(opt_lst,path,conn):
    for i in opt_lst:
        if path == i[0]:
            # 开线程传文件
            t = Thread(target=i[1],args=(conn,))
            t.start()

if __name__ == '__main__':
    # 处理的函数列表
    opt_lst = [
        ('/', index),
        ('/favicon.ico', ico),
        ('/1.jpg', img),
        ('/whw.css',css),
    ]
    # 初始化socket
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8991))
    server.listen()
    #连接循环
    while 1:
        conn,addr = server.accept()
        msg = conn.recv(65105).decode('utf-8')
        # print(msg)
        path = msg.split('\r\n\r\n')[0].split()[1]
        print(path)
        # 先法响应协议
        conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
        # 执行handle函数
        handle(opt_lst,path,conn)
优化三

在优化二中我们实现了多线程上传文件，结合前面实现的多线程接收请求，两者可以结合起来写，但是考虑到线程安全的问题，不建议大家这样来写：

多线程接收请求结合多线程上传文件 

import socket
from threading import Thread


def run_server(conn,opt_lst):
    msg = conn.recv(65105).decode(‘utf-8’)
    # print(msg)
    path = msg.split(‘\r\n\r\n’)[0].split()[1]
    print(path)
    # 先发响应协议
    conn.sendall(b’HTTP/1.1 200 OK \r\n\r\n’)
    # 开多线程执行文件操作
    t = Thread(target=handle,args=(opt_lst,path,conn))
    t.start()


def index(conn):
    with open(‘index.html’,’rb’)as f:
        data = f.read()
        conn.sendall(data)
        conn.close()


def ico(conn):
    with open(‘favicon.ico’,’rb’)as f:
        data = f.read()
        conn.sendall(data)
        conn.close()


def img(conn):
    with open(‘1.jpg’,’rb’)as f:
        data = f.read()
        conn.sendall(data)
        conn.close()


def handle(opt_lst,path,conn):
    for i in opt_lst:
        if path == i[0]:
            i[1](conn)


if name == ‘main‘:
    # 处理的函数列表
    opt_lst = [
        (‘/‘, index),
        (‘/favicon.ico’, ico),
        (‘/1.jpg’, img),
    ]
    # 初始化socket
    server = socket.socket()
    #设置端口重复利用
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind((‘127.0.0.1’,8765))
    server.listen()
    #连接循环
    while 1:
        conn,addr = server.accept()
        # 开线程处理连接
        t = Thread(target=run_server, args=(conn,opt_lst))
        t.start()

根据不同路径返回独立的页面

根据上面介绍的根据不同的路径返回相应的文件，我们也可以根据不同的路径返回独立的页面。
之前用到的index.html文件我们不考虑外部文件引入的情况，另外再新建一个home.html文件，同样不考虑外部文件引入的情况。
服务端的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
# -*- coding:utf-8 -*-
import socket

def index():
    with open('index.html','rb') as f:
        data = f.read()
        return data

def home():
    with open('home.html','rb')as f:
        data = f.read()
        return data

if __name__ == '__main__':
    opt_lst = [
        ('/index',index),
        ('/home',home)
    ]
    server = socket.socket()
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8765))
    server.listen()
    while 1:
        conn,addr = server.accept()
        msg = conn.recv(65105).decode('utf-8')
        #path是从请求体中经过处理得到的
        path = msg.split('\r\n\r\n')[0].split()[1]
        print(path)
        #记得发送响应协议！
        conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
        for i in opt_lst:
            if i[0] == path:
                func = i[1]
                content = func()
                #一定要记的break！不执行else里的语句
                break
        else:
            content = b'404 Not Found'

        conn.sendall(content)
        conn.close()

这样，我们在浏览器中输入127.0.0.1:8765/index与127.0.0.1:8765/home就可以看到对应的不同网页了。当然～需要其他的静态文件的话再另外做判断就OK了！

返回“动态”页面的web应用的实现

前面我们返回的都是静态网页，实际中的网页都是 动态的——其实所谓的动态网页是里面有可变的数据！
这里我们用字符串的替换方式来实现这个动态的需求——利用时间戳来模拟动态的数据。
代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
# -*- coding:utf-8 -*-
import time
import socket

def index():
    with open('index.html','r',encoding='utf-8')as f:
        data = f.read()
        str_now = str(time.time())
        # 替换源文件中的内容
        data = data.replace('123',str_now)
        # 注意返回bytes类型的数据
        return bytes(data,encoding='utf-8')


def home():
    with open('home.html','r',encoding='utf-8')as f:
        data = f.read()
        str_now = str(time.time())
        # 替换源文件中的内容
        data = data.replace('456',str_now)
        #注意返回bytes类型的数据
        return bytes(data,encoding='utf-8')

if __name__ == '__main__':
    opt_lst = [
        ('/index',index),
        ('/home',home),
    ]

    server = socket.socket()
    server.setsockopt(socket.SOL_SOCKET,socket.SO_REUSEADDR,1)
    server.bind(('127.0.0.1',8765))
    server.listen()
    while 1:
        conn,addr = server.accept()
        msg = conn.recv(65105).decode('utf-8')
        # print(msg)
        # 记得先给浏览器发送响应协议
        conn.sendall(b'HTTP/1.1 200 OK \r\n\r\n')
        # 通过请求体的数据筛选出path
        path = msg.split('\r\n\r\n')[0].split()[1]
        print(path)
        # for...else
        for i in opt_lst:
            if i[0] == path:
                content = i[1]()
                # 一定要记得break，不让else中的内容执行！
                break
        else:
            content = b'404 Not Found'
        conn.sendall(content)
        conn.close()

我们需要在index页面中加入这个标签：<h2>123</h2>，在home页面中加入下面的标签：<h2>456</h2>，这样的话可以用当前的时间戳代替页面中对应的字符串，实现一下动态的效果 - -！
最后我们在浏览器中输入127.0.0.1:8765/index与127.0.0.1:8765/home并不断刷新页面就可以看到动态的效果了！

wsgiref版web服务

经过上面的讲解与代码实现，大家肯定感受到了，对于一个web应用来说，浏览器作为客户端是已经成型的了，我们需要自己去实现一个web服务端来处理浏览器的请求并返回正确的响应！
而接下来要介绍的wsgiref是世界上最nice的框架——Django（个人认为- -!）内置的一个web服务端，它的作用就是将浏览器的请求进行封装——所有的请求信息都封装到了request对象中！使用request.path就能获取到用户这次请求的路径，request.method就能获取到本次用户请求的请求方式(get还是post)等，使用wsgiref模块极大的简化了我们写web应用的工作！
对于web后端开发者来说，有了这样的一个wen服务端模块我们不用再去过度的关注浏览器中纷繁复杂的请求信息与厚重的HTTP协议规范了——这样可以将绝大多数的时间放在业务逻辑的处理上！
其实wsgiref只是基于WSGI协议下的一个性能比较低的web服务端，实际生产中部署Django项目的时候我们都会选择性能更好的Uwsgi模块，当然个人调试的时候wsgiref是足够了的。
关于WSGI协议有兴趣的老铁可以参考这篇文章简单看看：Python进阶:何为WSGI协议

利用wsgiref实现一个简单的web服务端程序

接下来我们使用Python的wsgiref模块实现一个简单的web server程序：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
from wsgiref.simple_server import make_server

# wsgiref本身就是个web框架，提供了一些固定的功能
# 请求和响应信息的封装，不需要我们自己写原生的socket了也不需要我们自己来完成请求信息的提取，用起来很方便
def application(environ,start_response):
    '''
    environ:是全部加工好的请求信息，加工成了一个字典，通过字典取值的方式就能拿到很多你想要拿到的信息
    start_response: 帮你封装响应信息的（响应行和响应头），注意下面的参数
    '''
    #200 OK必须得有~后面的两个键值对可以不加~具体看需求
    start_response('200 OK',[('Content-Type','text/html'),('k1','v1')])
    
    print(environ)
    ##输入地址127.0.0.1:8080，这个打印的是'/',输入的是127.0.0.1:8080/index，打印结果是'/index'
    print(environ['PATH_INFO'])
    #注意最后return的是：列表里面是bytes类型的数据！
    return [b'<h1>Hello Web</h1>']

if __name__ == '__main__':
    http_obj = make_server('127.0.0.1',8080,application)

    print('Serving HTTP on port 8080...')
    #开始监听HTTP请求
    http_obj.serve_forever()

启动程序后，在浏览器中输入http://127.0.0.1:8080就可以看到响应的字符串了：

1
Hello Web

关于wsgiref的深入理解建议大家看这篇文章：wsgiref 源码解析

结束语

由于篇幅有限，本文只带大家介绍一下web程序的流程以及服务端是如何处理浏览器请求并将响应正确的返回给浏览器端的，并且最后引出了Python自带的一个web服务端模块——wsgiref。
下一篇文章将利用wsgiref模块实现一个简单的web框架，带大家深入理解web框架的本质，敬请期待！

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

火之影:<br>本科毕业于西南交通大学通信工程专业。专注技术，痴迷火影，喜爱魔兽的程序猿一枚<br><br>本站用于分享自己的技术博文<br>感谢大家交流指正