怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

本文由 简悦 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 文件

posted on   超级无敌美少男战士  阅读(312)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示