简介
WebSocket是一种在单个TCP连接上进行全双工通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
Web - Socket 客户端 与 服务器 达成一个协议
websocket 客户端 与 websocket 服务器 达成一个websocket协议
来个小例子方便大家理解:
ws-socket.py
from flask import Flask,request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer #应用程序网端接口的一个服务
from geventwebsocket.websocket import WebSocket #做语法提示用
app = Flask(__name__)
@app.route("/conn_ws")
def ws_app():
# print(request.environ) 请求原始信息
use_socket = request.environ.get("wsgi.websocket") #type:WebSocket #告诉编译器 use_socket的语法去WebSocket里面进行查找
#返回值是<geventwebsocket.websocket.WebSocket object at 0x000001FE56EDD868>
while True:
msg = use_socket.receive() #接收浏览器发来的消息
print(msg)
use_socket.send(msg) #将接收到的消息返回给浏览器
http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler) #websocket不支持 Werkzeug,只支持wsgi,所以将Werkzeug替换掉; 如果不是Http请求，需要用WebSocketHandler处理机制
http_serv.serve_forever() #启动
my_ws.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script type="application/javascript">
var ws = new WebSocket("ws://127.0.0.1:9527/conn_ws"); #创建一个ws的请求地址
ws.onmessage=function (messageEvent) { #接收服务器send到浏览器端的消息，一旦有消息会触发onmessage 机制
console.log(messageEvent.data) }
</script> </html>
websocket实现单群聊
ws-socket.py
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__)
user_socket_dict = {}
@app.route(‘/conn/ws/<user_nick>‘)
def ws_app(user_nick):
user_socket = request.environ.get(‘wsgi.websocket‘)
user_socket_dict[user_nick] = user_socket
while True:
msg = user_socket.receive()
print(msg)
msg_dict = json.loads(msg)
to_user = msg_dict.get(‘to_user‘)
if to_user:
to_user_socket = user_socket_dict.get(to_user) #如果昵称存在,则是单聊;昵称为空,为群聊
to_user_socket.send(msg)
else:
for socket in list(user_socket_dict.values()):
socket.send(msg)
@app.route(‘/‘)
def index():
return render_template(‘my_ws.html‘)
if __name__ == ‘__main__‘:
http_server = WSGIServer((‘0.0.0.0‘,8888),app,handler_class=WebSocketHandler)
http_server.serve_forever()
my_ws.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="nick"><button onclick="login()">登录聊天室</button>
<p>发送给: <input type="text" id="to_user"> 消息: <input type="text" id="msg"></p>
<button id="send_btn" onclick="send()">发送</button>
<p>
<div id="chat_list">
</div>
</p>
</body>
<script type="application/javascript">
var ws = null;
function login() {
var nick = document.getElementById(‘nick‘).value;
ws = new WebSocket(‘ws://127.0.0.1:8888/conn/ws/‘+nick);
ws.onmessage = function (messageEvent) {
console.log(messageEvent.data);
var ptag = document.createElement(‘p‘); #聊天记录
var message = JSON.parse(messageEvent.data);
ptag.innerText = message.from_user + ‘:‘ + message.message;
document.getElementById(‘chat_list‘).appendChild(ptag);
};
}
function send() {
var message = document.getElementById(‘msg‘).value;
var to_user = document.getElementById(‘to_user‘).value;
console.log(to_user);
if(to_user == null){
to_user = ‘‘
}
var send_str = {
from_user:document.getElementById(‘nick‘).value,
to_user:to_user,
message:message
};
var json_send_str = JSON.stringify(send_str);
ws.send(json_send_str);
}
</script>
</html>
原文地址：https://www.cnblogs.com/yaraning/p/10981720.html
时间： 2024-10-10 14:33:27