作者：D | 来源：互联网 | 2023-09-13 23:12
在开始我们的程序代码之前，先来了解一下相关的基础知识：1、什么是websocket？（1）WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSock
在开始我们的程序代码之前，先来了解一下相关的基础知识：
1、什么是websocket？
（1）WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通讯协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准；
（2）在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送；
（3）现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP request的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源；
（4）而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源；
（5）面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。
2、web socket优点
（1）服务器与客户端之间交换的数据包档头很小，大概只有2字节；
（2）服务器可以主动传送数据给客户端。
3、gevent-websocket介绍；
（1）是使用gevent封装的websocket库；
（2）可以很方便和其他网络框架结合。
好啦，了解以上的基础知识，就开始我们的简单的聊天室代码之路吧！
Test.py
from flask import Flask,render_template,request
from geventwebsocket.handler import WebSocketHandler
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
import json
app=Flask(__name__)
user_socket_list = []
user_socket_dict = {}
@app.route("/ws/")
def ws(username):
print(11111,request.environ)
user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
if user_socket:
user_socket_dict[username] = user_socket
print(len(user_socket_dict),user_socket_dict)
while 1:
msg = user_socket.receive() # 收件人 消息 发件人
msg_dict = json.loads(msg)
msg_dict["from_user"] = username
to_user = msg_dict.get("to_user")
# chat = msg_dict.get("msg")
u_socket = user_socket_dict.get(to_user) # type:WebSocket
u_socket.send(json.dumps(msg_dict))
# for u_socket in user_socket_list:
# if u_socket == user_socket:
# continue
# try:
# u_socket.send(msg)
# except:
# continue
@app.route("/")
def index():
return render_template("ws.html")
if __name__ == '__main__':
# app.run("0.0.0.0",9527,debug=True)
http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
http_serv.serve_forever()
html
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<meta name="viewport" content=">
head>
<body>
<input type="text" id="username"> <button onclick="login()">登录聊天室button>
给<input type="text" id="to_user">发送：<input type="text" id="msg"> <button onclick="send_msg()">发送button>
<div id="chat_list" style="width: 500px;height: 500px;">div>
body>
<script type="application/Javascript">
var ws = null;
function login() {
var username = document.getElementById("username").value;
ws = new WebSocket("ws://192.168.13.195:9527/ws/"+username);
ws.onmessage = function (data) {
console.log(data.data);
var recv_msg = JSON.parse(data.data);
var ptag = document.createElement("p");
ptag.innerText= recv_msg.from_user + ":" + recv_msg.msg;
document.getElementById("chat_list").appendChild(ptag);
}
}
function send_msg() {
var to_user = document.getElementById("to_user").value;
var msg = document.getElementById("msg").value;
var send_str = {
"to_user" :to_user,
"msg":msg
};
ws.send(JSON.stringify(send_str));
}
script>
html>
实现的页面如下：
京公网安备 11010802041100号