前后端的交互问题

http的单项传递

​ 最基本的协议，通常前段向后台发送，有get，post等等方法，现在前端上也有很多别的包可以用，axios等都可。但缺点在于它只能是前端向后端发起请求。

双向信息传递

暴力破解法：长短轮询

暴力破解永远是最熟悉的方法——客户端向服务端隔一段时间发送http请求回后台，间隔时间长短决定了轮询的次数，不过由于每次发送http请求的时候报文头可能都会比内容多，所以轮询会有浪费带宽的坏处，但简单的点在于它实现起来没有任何技术上的压力。

websocket：真正的双工实现

比起暴力破解，websocket更加智能和优雅?（当然，是在做出来的前提下，没做出来，各种奇怪的错误更让人自闭

websocket的机制

websocket首先会用http来进行连接，连接完成之后此项服务就会交给websocket来管理，之后就会建立长久的连接。

websocket的js原生实现

websocket的原生实现比较简单，这里用python来写后端代码，js来写前段代码(js用的es6的写法，这个是基于react框架，从中间截取出来)。

import asyncio
import websockets

# 接收客户端消息并处理，这里只是简单把客户端发来的返回回去
async def recv_msg(websocket):
    while True:
        recv_text = await websocket.recv()
        response_text = f"your submit context: {recv_text}"
        await websocket.send(response_text)

# 服务器端主逻辑
# websocket和path是该函数被回调时自动传过来的，不需要自己传
async def main_logic(websocket, path):
    await recv_msg(websocket)

# 把ip换成自己本地的ip
start_server = websockets.serve(main_logic, 'localhost', 5678)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

// 打开一个 web socket
const ws = new WebSocket("ws://localhost:5678");

// 连接建立后
ws.onopen=()=>
{
	console.log("成功连接")
}

// 接收到服务器消息后，建立连接后会一直监听
ws.onmessage=(e)=> 
{ 
    const received_msg = e.data;
    console.log("收到消息："+received_msg);
}

//传递数据到服务器
ws.send("msg")

// 连接关闭后
ws.onclose =()=>
{ 
    console.log("连接已关闭..."); 
}

这样的实现很简洁也很简单，对于前端来说，所有使用都在这上面做组合就可以了。

websocket的实现：基于socket.io

//使用方法

//导入，采用es6的方法
import io from 'socket.io-client'

//连接后台 http://ip:port/namespace
const socket = io("http://192.168.6.140:6888/test_conn")

//监听事件,这个server_response并不是固定的，他是和后端成对的
//如果前端监听 'server_response',他对应监听的消息就是后端socketio.emit('server_response','msg')
socket.on('server_response',(data)=>{
    console.log(data)
    //传送标记为event的消息，后端监听socketio.on('event',namespace='/test_conn')
    socket.emit('event',"message")
})

踩坑记录----错误记录

• Cannot read property 'sid' of undefined

  • 前段可以接受到后台发送的sid信息，但是在socktio解析过程中报错无法得到sid的信息

  • //network中获取的第一个消息
    0{"sid":"NWUwZWY4NzBiYjk1OQ==","upgrades":[],"pingInterval":44000,"pingTimeout":36000}
        
        
    //network的信息流
    server----------------------------client
    ----0{sid,upgrades,pinginterval...}---->
    <------------------{40}-----------------
    ------------------>{40}---------------->
    ------------------>{40}---------------->
    

    前段连接代码采用上面的引入import io from 'socket.io-client'，不要用require('socket.io-client')

• 后台报错http1.1 400或者http1.1 404

  • 后台socketio应该有

    socketio = SocketIO(app, async_mode=async_mode,cors_allowed_origins='*')