js中的XMLHttpRequest、websocket使用

一、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()

• 服务端示例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()