本文由 简悦 SimpRead 转码, 原文地址 blog.csdn.net
1、安装 socketio 服务端
# 官网介绍:https://python-socketio.readthedocs.io/en/latest/server.html pip install python-socketio
2、服务端代码 (socketio_server.py)
import logging import socketio from aiohttp import web from urllib import parse from bidict import bidict async def chat_room(request): with open('./static/chat_room.html') as f: return web.Response(text=f.read(), content_type='text/html') async def login(request): data = await request.json() user_name = data['user_name'] if user_sid.get(user_name, None): return web.json_response({'code': 'fail'}, status=-1) else: return web.json_response({'code': 'success'}, status=200) async def connect(sid, environ): query_params = environ['QUERY_STRING'].split('&') params = dict() for query_param in query_params: a, b = query_param.split('=') params[a] = parse.unquote(b) user_name = params['name'] user_sid[user_name] = sid await sio.emit('reply', f'{user_name}连线成功!', namespace='/chat') async def message(sid, data): # print("server received message!", data) await sio.emit('reply', f"{user_sid.inv[sid]}: {data}", namespace='/chat') async def disconnect(sid): user_name = user_sid.inv[sid] del user_sid[user_name] await sio.emit('reply', f'{user_name}退出连线!', namespace='/chat') if __name__ == '__main__': app = web.Application() # logging.basicConfig(level=logging.DEBUG) app.router.add_get('/chat_room', chat_room) app.router.add_routes([web.post('/login', login)]) app.router.add_static('/static', 'static') sio = socketio.AsyncServer() sio.on('disconnect', disconnect, namespace='/chat') sio.on('chat message', message, namespace='/chat') sio.on('connect', connect, namespace='/chat') sio.attach(app) user_sid = bidict() web.run_app(app, host='localhost') # 聊天室页面:http://localhost:8080/chat_room # 如果修改ip地址需要修改chat_room.html中的第20行以及第61的localhost
3、聊天室页面 (chat_room.html)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>WebSocket Chat</title> </head> <body> 用户名:<input type="text" id="uname"/><br> <input type="submit" value="登录" onclick="checkuser()"/> <script src="static/socket.io-client-4.1.2/dist/socket.io.js"></script> <script type="text/javascript"> var socket; function get_in_room(name) { if (!window.WebSocket) { window.WebSocket = window.MozWebSocket; } if (window.WebSocket) { socket = io('http://localhost:8080/chat?name=' + name); socket.on('message', function (msg) { var ta = document.getElementById('responseText'); ta.value = ta.value + '\n' + name + ': ' + event.data; }); socket.on('reply', function (msg) { var ta = document.getElementById('responseText'); ta.value = ta.value + '\n' + msg; down(); }); } else { alert("你的瀏覽器不支援 WebSocket!"); } } function check_login() { if (!window.WebSocket) { return; } if (typeof socket == "undefined") { alert('请先登录'); return } } function send_message(message) { check_login(); socket.emit('chat message', message); empty_input() } function enter_message(message) { if (event.keyCode == 13) { check_login(); socket.emit('chat message', message); empty_input() } } function getValue(id) { return document.getElementById(id).value; } function checkuser() { var xhr = new XMLHttpRequest(); //使用HTTP POST请求与服务器交互数据 xhr.open("POST", "http://localhost:8080/login", true); //设置发送数据的请求格式 xhr.setRequestHeader('content-type', 'application/json; charset=utf-8'); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { //根据服务器的响应内容格式处理响应结果 if (xhr.getResponseHeader('content-type') === 'application/json; charset=utf-8') { var result = JSON.parse(xhr.responseText); //根据返回结果判断验证码是否正确 if (result.code === 'fail') { alert('名称已存在'); return; } else { console.log(1, xhr.responseText); get_in_room(getValue('uname')); } } } } var sendData = { 'user_name': getValue('uname') }; //将用户输入值序列化成字符串 xhr.send(JSON.stringify(sendData)); } function down() { var textarea = document.getElementById('responseText'); textarea.scrollTop = textarea.scrollHeight; } function empty_input(){ var m = document.getElementById('message'); m.value = '' } </script> <form onsubmit="return false;"> <h3>WebSocket 聊天室:</h3> <textarea id="responseText" style="width: 500px; height: 300px;"></textarea> <br> <input id="message" type="text" onkeydown="enter_message(value)"> <input type="button" value="发送信息" onclick="send_message(this.form.message.value)"> <input type="button" onclick="javascript:document.getElementById('responseText').value=''" value="清空聊天记录"> </form> <br> <br> </body> </html>
这个 html 中需要 socketio 的客户端 js 代码
socketio js 来源:https://github.com/socketio/socket.io-client/releases/tag/4.1.2
下载后文件目录结构如下
├── socketio_server.py └── static ├── chat_room.html └── socket.io-client-4.1.2
4、运行
直接 run socketio_server.py,然后打开 http://localhost:8080/chat_room 就可以进入聊天室。聊天前需要先填写用户名登录,无需密码,但用户名不允许重复;注意如果修改 ip,同时需要修改 html 文件
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战