1、安装gevent-websocket
pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ gevent-websocket
2、chat.py文件内容如下:
from flask import Flask,request,render_template
import json
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket user_dict = {} chat_app = Flask(__name__)
@chat_app.route('/ws/<username>')
def ws_chat(username):
user_socket = request.environ.get('wsgi.websocket') # type:WebSocket
user_dict[username]=user_socket
while 1:
msg = user_socket.receive() # 等待接收客户端发来的数据
msg_dict = json.loads(msg)
msg_dict['from_user'] = username
to_user = msg_dict.get('to_user')
if to_user == "": # 如果用户名是空表示群发
for uname, uwebsocket in user_dict.items():
if uname == username: # 群发时不用给自己发
continue
uwebsocket.send(json.dumps(msg_dict))
continue
to_user_socket = user_dict.get(to_user)
if not to_user_socket: # 判断用户字典中是否存在用户的websocket连接
continue
try:
msg_dict['from_user'] = msg_dict['from_user'] + '@私聊我'
to_user_socket.send(json.dumps(msg_dict))
except:
user_dict.pop(to_user) @chat_app.route('/webchat')
def webchat():
return render_template('public_chat.html') if __name__ == '__main__':
server = WSGIServer(('0.0.0.0',9527),chat_app,handler_class=WebSocketHandler)
server.serve_forever()
3、web_chat.html文件部分内容如下:
<p>你的名字:<input type="text" id="username">
<button onclick="open_ws()">登陆聊天室</button>
</p>
<form onsubmit="return false;">
<h3>WebSocket 聊天室:</h3>
<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
<br>
给:<input type="text" id="to_user">消息内容:<input type="text" id="message">
<input type="button" value="发送消息" onclick="send_msg()">
<input type="button" onclick="javascript:document.getElementById('responseText').value=''"
value="清空聊天记录">
</form>
4、js代码如下:
<script type="application/javascript">
var ws = null;
function open_ws() {
var username = document.getElementById('username').value;
ws = new WebSocket("ws://192.168.16.239:9527/ws/" + username);
ws.onopen = function () {
alert("登陆成功");
}; ws.onmessage = function (eventMessage) {
// 显示消息记录
var chat = JSON.parse(eventMessage.data);
console.log(chat);
var chat_content = document.getElementById('responseText');
chat_content.value = chat_content.value + "\n" + chat.from_user + " : " + chat.chat;
};
} function send_msg() {
// 发送消息
var to_user = document.getElementById("to_user").value;
var msg = document.getElementById("message").value;
var send_str = {
to_user: to_user,
chat: msg
};
ws.send(JSON.stringify(send_str));
var chat_content = document.getElementById("responseText");
chat_content.value = chat_content.value + "\n" + "我: " + msg;
}
</script>
最终的效果图如下: