一、XMLHttpRequest

发送请求
- 创建XMLHttpRequest实例
```
let xhr = new XMLHttpRequest();
```
- 初始化
```
xhr.open(method, URL, [async, user, password])
```
  - method：HTTP方法，通常'GET'或者'POST'
  - URL：请求的URL
  - async：是否开启异步
  - user、password：HTTP需要身份验证时的用户名、密码
- 发送请求
```
xhr.send([body])
```
  GET请求不需要请求体，POST请求则需要

GET请求示例

// 1、创建实例
xhr = new XMLHttpRequest()

//2、建立连接，要求异步响应
xhr.open('GET', 'https://www.baidu.com', true)

//3、监听异步响应状态
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        } else {
            console.log(`Error ${xhr.status}: ${xhr.statusText}`)
        }
    }
}

// 4、发送请求
xhr.send()

POST请求示例

// 1、创建实例
xhr = new XMLHttpRequest()

//2、建立连接，要求异步响应
xhr.open('POST', 'https://www.xxx/xxx', true)

//3、设置为表单方式提交
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// json方式
// xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');  

//4、监听异步响应状态
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText)
        } else {
            console.log(`Error ${xhr.status}: ${xhr.statusText}`)
        }
    }
}

// 4、发送请求
xhr.send('name1=value1&name2=value2') // 表单方式
// json方式
// xhr.send(JSON.stringify({name1: value1, name2: value2}))

二、websocket

客户端示例

// 创建websocket实例
let ws = new WebSocket('ws://127.0.0.1:9999')

// 监听open事件
ws.addEventListener('open', function (event) {
    console.log('已与服务器建立连接');
});

// 监听服务器发送过来的消息
ws.onmessage = function (event) {
    var data = event.data; // 服务器返回的数据
    // 可以处理各种业务逻辑
    console.log(data)
    ws.send('已收到消息，准备下线。。。') // 向服务器发送消息
    ws.close() // 主动关闭连接
}

服务端示例1

# pip install gevent-websocket
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer

websocket_list = [] # 记录当前所有已连接客户端


def websocket_app(environ, start_response):
    ws = environ["wsgi.websocket"]  # 实例化websocket对象，建立连接
    websocket_list.append(ws)
    print(f'连接成功，当前连接数{len(websocket_list)}')
    ws.send('Hello Client')
    while True:
        message = ws.receive()  # 会阻塞，直到接收消息，连接关闭时，返回值None
        if message is None:
            ws.close()
            websocket_list.remove(ws)
            print(f'连接已断开，剩余连接数：{len(websocket_list)}')
            break
        # 业务逻辑
        # 比如将接收到的消息存到数据库等
        print(message.decode('utf-8'))


if __name__ == "__main__":
    server = WSGIServer(("0.0.0.0", 9999), websocket_app, handler_class=WebSocketHandler)
    server.serve_forever()

View Code

服务端示例2

import asyncio
import websockets

async def check_permit(websocket):
    send_text = 'Hello Client'
    await websocket.send(send_text)
    return True

async def recv_msg(websocket):
    while 1:
        recv_text = await websocket.recv()
        print(recv_text)


async def main_logic(websocket, path):
    await check_permit(websocket)
    await recv_msg(websocket)

start_server = websockets.serve(main_logic, '127.0.0.1', 9999)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()