Websocket

是一种在单个TCP连接上进行全双工通信的协议允许客户端和服务器之间相互发送数据而不需要像传统的HTTP请求-响应模型那样频繁建立和断开连接。

Communication)是一种通信模式允许通信双方同时发送和接收数据。

换句话说数据可以同时从两端双向传输而不会相互阻塞或干扰。

1.2

FastAPI提供了对WebSocket的原生支持允许你轻松构建高效的实时应用如聊天室、实时数据更新等。

1.2.1

作用将一个路径(如/ws)与一个处理WebSocket请求的函数关联。

当客户端通过WebSocket连接该路径时FastAPI会调用该函数处理连接和通信。

参数它接受的参数与其他路由装饰器相同主要是路径(URL)可选地也能设置依赖项、权限等。

代码举例如下(当客户端通过WebSocket连接/ws路径时FastAPI将执行下面的websocket_endpoint函数)

from

FastAPI提供了处理WebSocket各种事件的方法包括接受消息、发送消息、关闭连接等。

具体如下

websocket.accept接受WebSocket连接请求。

websocket.receive_text接收客户端发来的文本消息。

websocket.send_text向客户端发送文本消息。

websocket.close关闭WebSocket连接。

构建对话机器人

这里我们用FastAPI和React构建一个聊天机器人。

这里关于机器人的后端处理逻辑这里不做详细介绍(这里不介绍CSS代码)。

具体代码如下

React中App.tsx代码如下

srchttps://cdn.builder.io/api/v1/image/assets/TEMP/b0db057162d379f22892cd5ae4d13c509717e0a81da39be3f65cb94e15556ed7?apiKey0682bce60b3549f085131079f1bf89f0apiKey0682bce60b3549f085131079f1bf89f0

altChainlit

classNameheader-titleSmartRecommend服务推荐助手/div/div/divdiv

classNamemaindiv

Message{id:string,name:string,type:string,output:string,createdAt:number|string,

function

useStateWebSocket|null(null);useEffect(()

{const

WebSocket(ws://localhost:8000/ws/chat);ws.onopen

{console.log(websocket链接已建立!);};ws.onmessage

(event)

JSON.parse(event.data);setMessages((prevMessages)

[...prevMessages,

error);};ws.onclose(){console.log(websocket链接已关闭!);}setSocket(ws);return

handleSendMessage

Date.now(),};setMessages((prevMessages)

[...prevMessages,

message]);socket?.send(JSON.stringify(message));}setInputValue();};const

renderMessage

Date(message.createdAt).toLocaleTimeString(undefined,dateOptions);if(message.type

user_message)

classNamebot-user-name{message.name}/divdiv

classNamebot-user-time{date}/div/divdiv

classNameuser-chat-message{message.output}/div/div/div);}

else

classNamebot-user-name{message.name}/divdiv

classNamebot-user-time{date}/div/divdiv

classNamebot-chat-message{message.output}/div/div/div);};};return

(div

classNamechat-box{messages.map(renderMessage)}/divdiv

typetextvalue{inputValue}placeholder你可以输入“金仔金仔”唤醒服务onChange{(e)

setInputValue(e.target.value)}onKeyUp{(e)

{if

{handleSendMessage();}}}/inputbutton

classNamebutton

typesubmitSend/button/div/div);

export

app.add_middleware(CORSMiddleware,allow_origins[http://localhost:3000],allow_credentialsTrue,allow_methods[*],allow_headers[*],

clients:

[]RASA_API_URLhttp://localhost:5005/webhooks/rest/webhookapp.websocket(/ws/chat)

async

websocket.accept()clients.append(websocket)try:while

True:data

generate(),name:Bot,type:bot_message,output:json.loads(data)[output],createdAt:int(datetime.datetime.now().timestamp()*1000)}textjson.dumps(text)await

Exception

e:print(e)clients.remove(websocket)if

__name__