徐州优化网站建设,济南网站建设联系方式,做网站i3够用吗,虫点子创意设计公司前面我们发送的大多数都是text类型的消息#xff0c;对于text消息来说#xff0c;后端处理出来要麻烦的多#xff0c;那么我们可以不可以传递json格式的数据#xff0c;对于前后端来说都比较友好#xff0c;答案是肯定的#xff0c;我们需要做下处理。
首先#xff0c;…前面我们发送的大多数都是text类型的消息对于text消息来说后端处理出来要麻烦的多那么我们可以不可以传递json格式的数据对于前后端来说都比较友好答案是肯定的我们需要做下处理。
首先我们在websocket管理器中增加处理json格式消息的方法
from typing import List, Dictfrom starlette.websockets import WebSocketclass ConnectionManager:def __init__(self):存放链接self.active_connections: List[Dict[str, WebSocket]] []async def connect(self, user: str, ws: WebSocket):链接await ws.accept()self.active_connections.append({user: user, ws: ws})async def disconnect(self, user: str, ws: WebSocket):断开链接移除self.active_connections.remove({user: user, ws: ws})staticmethodasync def send_personal_message(message: str, ws: WebSocket):发送所有人消息await ws.send_text(message)async def send_other_message(self, message: dict, user: str):发送个人消息for coon in self.active_connections:if coon[user] user:await coon[ws].send_json(message)async def broadcast(self, data: str):广播for conn in self.active_connections:await conn[ws].send_text(data)async def broadcast_json(self, data: dict):广播json数据for conn in self.active_connections:await conn[ws].send_json(data)
接口中如何接收json数据呢新增接口如下
app.websocket(/ws/json/{user})
async def websocket_json_data(websocket: WebSocket,user: str,cookie_or_token: str Depends(get_cookie_or_token)
):发送接收json数据前面一对一接口其实就是发送的json数据await ws_manager.connect(user, websocket)try:while True:data await websocket.receive_json()send_user data[username]if send_user:await ws_manager.send_other_message(data, send_user)else:await ws_manager.broadcast_json(data)except WebSocketDisconnect as e:await ws_manager.disconnect(user, websocket)前端也要相对应的修改
!DOCTYPE html
html
headtitleChat/title
/head
body
h1WebSocket 聊天/h1
form action onsubmitsendMessage(event)input typetext idmessageText autocompleteoff/input typetext idusername autocompleteoff/buttonSend/button
/form
button onclicklogout()退出/button
ul idmessages
/ul
scriptvar tokenwindow.localStorage.getItem(token)if (tokennull ){window.location.href/login}var ws new WebSocket(ws://localhost:8000/ws/json/token?tokentoken);ws.onmessage function (event) {var messages document.getElementById(messages)var message document.createElement(li)let receiveJson JSON.parse(event.data);console.log(receiveJson)var content document.createTextNode(receiveJson.username说:receiveJson.messageText)message.appendChild(content)messages.appendChild(message)};function sendMessage(event) {var input document.getElementById(messageText)var username document.getElementById(username)let message {messageText: input.value, username:username.value};let messageJson JSON.stringify(message);ws.send(messageJson);// input.value event.preventDefault()}function logout() {window.localStorage.removeItem(token)window.location.href/login}
/script/body/html部署看效果因为发送给后端的数据格式是前端拼的json所以页面上只需要填文本即可
