flask使用geventwebsocket完成小型聊天系统
geventwebsocket使用方法
websocket状态
1:连接打开
2:客户端主动关闭连接
3:连接关闭(由服务器发起)
0:连接中...
socket的异步回调
var ws = new WebSocket("ws://127.0.0.1:9527/ws");
// onopen连接成功时,执行
ws.onopen=function () {
ws.send('110')
}
// #onmessage接收到消息时执行
ws.onmessage=function (evenMessage) {
console.log("接收成功")
console.log(evenMessage.data)
}
geventwebsocket完成群聊
模块导入
from geventwebsocket.handler import WebSocketHandler #ws协议请求处理
from geventwebsocket.server import WSGIServer #替换Flask 原有的WSGI
from geventwebsocket.websocket import WebSocket #语法提示
from flask import Flask, request #Flask,request 模块
Flask项目的改写(创建一个websocket服务器)
app=Flask(__name__)
if __name__ == '__main__':
http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
http_src.serve_forever() #开始监听
WSGIServer((ip地址,端口号),flask实例化的app,handler_class=WebSocketHandler)
handler_class 指定连接方式,默认为WSGIHandler
在Flask视图函数拿到客户端发送的内容
@app.route("/")
def index():
sock=request.environ.get('wsgi.websocket') #type:WebSocket # 拿到客户端的socket对象
while 1: #循环一直接收客户端连接,如无循环,接收一次连接就会关闭
msg=sock.receive() #拿到客户端发送的内容
sock.send(msg) #将客户端发送的东西再返回给客户端
print(msg)
在html文件通过script完成信息的发送
<script type="application/javascript">
var ws = new WebSocket("ws://127.0.0.1:9527/");
// 使用回调函数,在连接成功时,执行代码
ws.onopen=function () {
ws.send("hello 怪怪")
};
//使用回调函数,在客户端接收到消息时执行代码
ws.onmessage=function (MassageEven) {
console.log("我接收到了");
console.log(MassageEven.data) //打印接收到的信息
}
</script>
逻辑代码
服务端:使用一个列表存储所有的已经连接的客户端,通过循环列表,向所有人发送信息
客户端html:通过点击事件,将输入用户名的内容和输入的框的内容拼接好后,发送给后端,后端返回后通过jq显示在页面
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
您的用户名: <input type="text" id="username">
您想要发送的内容: <input type="text" id="send_text">
<input type="submit" id="tn">
<h1>性感太白在线luo聊</h1>
<div id="kuang">
</div>
</body>
<script src="jquery.js"></script>
<script type="application/javascript">
var ws = new WebSocket("ws://127.0.0.1:9527/");
//使用回调函数,在客户端接收到消息时执行代码
ws.onmessage=function (MassageEven) {
// console.log("我接收到了");
// console.log(MassageEven.data); //打印接收到的信息
$('#kuang').append(MassageEven.data); //当收到服务端的信息时,将信息添加到客户端页面
};
$('#tn').click(function () { //当点击发送按钮后,将输入的内容发送
var name=$("#username").val();
var text=$("#send_text").val();
ws.send("<p>"+name+" : "+text+"</p>"); //拼接用户名和发送内容
$("#send_text").val("") //清空输入框
})
</script>
</html>
服务端代码
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.server import WSGIServer
from geventwebsocket.websocket import WebSocket
from flask import Flask, request
app=Flask(__name__)
li=[] #使用一个列表存储所有的已经连接的客户端
@app.route("/")
def index():
sock = request.environ.get('wsgi.websocket') # type:WebSocket # 拿到客户端的socket对象
li.append(sock)
print(li)
while 1:
try:
msg = sock.receive() # 拿到客户端发送的内容
except:
li.remove(sock)
break
for so in li: #通过循环,向所有人发送信息
# if so ==sock:
# continue
try:
so.send(msg)
print(msg)
except:
continue
return "sss"
if __name__ == '__main__':
http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
http_src.serve_forever()
geventwebsocket完成私聊
服务端:使用一个字典存储所有的已经连接的客户端,通过字典查询,向对方发送信息
客户端html:通过点击事件,将输入用户名的内容和输入的框的内容拼接好后,发送给后端,后端返回后通过jq显示在页面
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
用户名: <input type="text" id="username"> <input type="submit" id="tn" value="登陆聊天室"> <br> <br>
向 <input type="text" id="sender"> 发送 <input type="text" id="text"> <input type="submit" id="send" value="发送">
<h1>与太白的那些不可说的悄悄话</h1>
<div id="nr">
</div>
</body>
<script src="jquery.js"></script>
<script>
var ws =null;
var username=null;
$('#tn').click(function () {
username=$('#username').val();
ws = new WebSocket("ws://127.0.0.1:9527/"+username);
ws.onopen=function () {
alert("欢迎"+username+"登陆聊天室")
};
ws.onmessage=function (MassageEven) {
console.log(MassageEven.data)
$('#nr').append(MassageEven.data)
}
});
$('#send').click(function () {
var sender =$('#sender').val();
var text =$('#text').val();
var send_msg={"username":username,"sender":sender,'text':text};
console.log(send_msg);
ws.send(JSON.stringify(send_msg))
})
</script>
</html>
服务端代码
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.server import WSGIServer
from geventwebsocket.websocket import WebSocket
from flask import Flask, request
import json
app=Flask(__name__)
sock_dic={}
@app.route("/<username>")
def index(username):
sock=request.environ.get('wsgi.websocket') #type:WebSocket
sock_dic[username]=sock
while 1:
msg=sock.receive()
msg=json.loads(msg)
uname=msg['username']
text=msg['text']
text="<p>"+uname+" : " +text+"</p>"
sender=msg['sender']
try:
sock_dic[sender].send(text)
sock_dic[uname].send(text)
except:
sock_dic[uname].send("对方未上线或....")
return "200 ok"
if __name__ == '__main__':
http_src=WSGIServer(('0.0.0.0',9527),app,handler_class=WebSocketHandler)
http_src.serve_forever()
