版权声明：本文为博主原创文章，各路大佬可放心转载。 https://blog.csdn.net/qq_41964425/article/details/85172516
群聊
后端代码
from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket # 这个用于语法提示
app = Flask(__name__) # type:Flask
user_socket_list = []
# 群聊
@app.route('/group_chat')
def group_chat():
user_socket = request.environ.get('wsgi.websocket') # type:WebSocket
user_socket and user_socket_list.append(user_socket)
while 1:
msg = user_socket.receive()
for usocket in user_socket_list:
if usocket is user_socket:
continue
try:
usocket.send(msg)
except Exception as e:
continue
@app.route('/')
def index():
return render_template('group_chat.html')
if __name__ == '__main__':
http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
http_serv.serve_forever() # 跑起来
前端代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>群聊</title>
</head>
<body>
<p>发送内容：<input type="text" id="message"><button onclick="send_msg()">发送消息</button></p>
<div id="msg_list" style="width: 500px;">
</div>
</body>
<script type="application/javascript">
var ws = new WebSocket("ws://127.0.0.1:5000/group_chat"); // ⚠️
// ws.onopen = function(){
// alert("欢迎来到群聊系统");
// };
ws.onmessage = function (ws_status) {
console.log(ws_status.data);
var ptag = document.createElement("p");
ptag.innerText = ws_status.data;
document.getElementById("msg_list").appendChild(ptag);
};
function send_msg() {
var msg = document.getElementById("message").value;
var ptag = document.createElement("p");
ptag.style.cssText = "text-align: right;";
ptag.innerText = msg;
document.getElementById("msg_list").appendChild(ptag);
ws.send(msg);
}
</script>
</html>
一对一
后端代码
import json
from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket # 这个用于语法提示
app = Flask(__name__) # type:Flask
user_socket_dict = {}
# 一对一
@app.route('/one_to_one/<user>')
def one_to_one(user):
print(user_socket_dict)
user_socket = request.environ.get('wsgi.websocket') # type:WebSocket
user_socket and user_socket_dict.setdefault(user, user_socket)
while 1:
bytes_msg = user_socket.receive()
msg_dict = json.loads(bytes_msg)
print(msg_dict)
to_usocket = user_socket_dict.get(msg_dict.get('to_user'))
to_usocket.send(json.dumps({'from_user': user, 'to_user': msg_dict.get('to_user'), 'msg': msg_dict.get('msg')}))
@app.route('/')
def index():
return render_template('one_to_one.html')
if __name__ == '__main__':
http_serv = WSGIServer(('0.0.0.0', 5000), app, handler_class=WebSocketHandler)
http_serv.serve_forever()
前端代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="content-Type" charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>一对一</title>
</head>
<body>
<p>您的昵称：<input type="text" id="nick">
<button onclick="openws()">进入聊天室</button>
</p>
<p>给<input type="text" id="to_user">发送：<input type="text" id="message">
<button onclick="send_msg()">发送消息</button>
</p>
<div id="msg_list" style="width: 500px;">
</div>
</body>
<script type="application/javascript">
var ws = null;
function openws() {
var nick = document.getElementById("nick").value;
ws = new WebSocket("ws://127.0.0.1:5000/one_to_one/" + nick);
ws.onmessage = function (ws_status) {
console.log(ws_status.data);
var msg_obj = JSON.parse(ws_status.data);
var ptag = document.createElement("p");
ptag.innerText = msg_obj.from_user + " : " + msg_obj.msg;
document.getElementById("msg_list").appendChild(ptag);
};
}
function send_msg() {
var msg = document.getElementById("message").value;
var from_user = document.getElementById("nick").value;
var to_user = document.getElementById("to_user").value;
var ptag = document.createElement("p");
ptag.style.cssText = "text-align: right;";
ptag.innerText = msg + " : " + from_user;
document.getElementById("msg_list").appendChild(ptag);
var msg_obj = {
msg: msg,
from_user: from_user,
to_user: to_user
};
ws.send(JSON.stringify(msg_obj));
}
</script>
</html>