WebSocketの記事(フラスコに基づきます)

シンプルなのWebSocket

from flask import Flask,request
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket #语法提示用的

app = Flask(__name__)

#wsgi.websocket socke-> socket链接 可以用来收发消息

@app.route("/ws")
def ws():
    user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
    msg = user_socket.receive()
    print(msg)
    return ":123"

if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()

そして、あなたは、単純なコールを作ることができます
ここに画像を挿入説明
ここに画像を挿入説明

だから、どのように我々は、グループチャット用WebSocketを通じてそれを達成するのですか?

私たちも、人々のリンクまで、すべてのソケットを記録する必要があり、その後、メッセージを送信するとは限らない独自のソケットリンクリストを循環した後、これは思考の具体的な方法で、リストに追加され、ここでは、コードの流れがあります。

"""
@author: Yxinmiracle
@project: f
@file: s1.py
@time: 2020/3/9 12:30
@desc:

 /*code is far away from bug with the animal protecting

  """

from flask import Flask,request,render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket #语法提示用的
import json

app = Flask(__name__)

#wsgi.websocket socke-> socket链接 可以用来收发消息
#拿到socket链接就可以进行通讯了

user_socket_list = []

@app.route("/ws")
def ws():
    user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
    user_socket_list.append(user_socket)
    print(len(user_socket_list))
    while 1:
        try:
            msg = user_socket.receive()
            for socket in user_socket_list:
                if socket != user_socket:
                    #print(msg)
                    socket.send(msg)
        except:
            user_socket_list.remove(user_socket)

@app.route('/chat')
def chat():
    return render_template("ws.html")

if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0",5000),app,handler_class=WebSocketHandler)
    http_serv.serve_forever()

ここでは、フロントエンドのコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="chat" style="width: 500px;height: 500px;">
    <p>发送消息:<input type="text" id="msg"><button onclick="send_msg()">发送</button></p>
</div>
</body>
<script type="text/javascript">
    var ws = new WebSocket("ws://192.168.....:5000/ws");

    ws.onmessage = function (data) {
       // var msg = JSON.parse(data.data);
        console.log(data.data);
        var ptag = document.createElement("p");
        ptag.innerText = data.data;
        document.getElementById("chat").appendChild(ptag);
    };
    
    function send_msg() {
        var msg = document.getElementById("msg").value;
        ws.send(msg);
        document.getElementById("msg").value = '';
    }
</script>
</html>

それでは、どのよう我々は、単一のチャット用WebSocketそれによって実現されなければなりませんか?

彼は、その後、彼のwsgi.websocketを名前レコードを登録したとき私たちは、このリンクを介してユーザをするたびに来ました:

user_socket_dict = {"nickname":"wsgi.websocket"}

辞書記録し、その後は需要て送信を実装するこの方法です。

ここで達成するためのコードは次のとおりです。

"""
@author: Yxinmiracle
@project: f
@file: s1.py
@time: 2020/3/9 12:30
@desc:

 /*code is far away from bug with the animal protecting

  """

from flask import Flask, request, render_template
from geventwebsocket.handler import WebSocketHandler
from gevent.pywsgi import WSGIServer
from geventwebsocket.websocket import WebSocket  # 语法提示用的
import json

app = Flask(__name__)

# wsgi.websocket socke-> socket链接 可以用来收发消息
# 拿到socket链接就可以进行通讯了

user_socket_dict = {}


@app.route("/ws/<username>")
def ws(username):
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    user_socket_dict[username] = user_socket
    print(len(user_socket_dict))
    while 1:
        try:
            msg = user_socket.receive()
            msg = json.loads(msg)
            to_user = msg.get("to_user")
            content = msg.get("msg")
            usocket = user_socket_dict.get(to_user)
            recv_msg = {"from_user": username, "msg": content}
            usocket.send(json.dumps(recv_msg))
        except:
            pass


@app.route('/chat')
def chat():
    return render_template("ws.html")


if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0", 5000), app, handler_class=WebSocketHandler)
    http_serv.serve_forever()

ここでは、フロントエンドのコードが実装されています。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>你的名字是:<input type="text" id="username"></p>
<p>请点击<button onclick="open_ws()">链接服务器</button></p>
<p>给:<input type="text" id="to_user"></p>
<p>发送消息:<input type="text" id="msg">
    <button onclick="send_msg()">发送</button>
</p>
<div id="chat" style="width: 500px;height: 500px;">
</div>
</body>
<script type="text/javascript">
    var ws = null;

    function open_ws() {
        var username = document.getElementById("username").value;
        ws = new WebSocket("ws://192.168.0...../ws/" + username);
        ws.onmessage = function (data) {
            console.log(data.data);
            var msg = JSON.parse(data.data);
            var ptag = document.createElement("p");
            ptag.innerText = "来自"+msg.from_user+  "的消息" + ":" + msg.msg;
            document.getElementById("chat").appendChild(ptag);
        };
    }

    function send_msg() {
        var msg = document.getElementById("msg").value;
        var to_user = document.getElementById("to_user").value;
        var send_obj = {to_user:to_user,msg:msg};
        ws.send(JSON.stringify(send_obj));
    }
</script>
</html>

この目的のため、その上にノートの現在のバージョンのWebSocketの基礎

公開された12元の記事 ウォン称賛7 ビュー167

おすすめ

転載: blog.csdn.net/caiyongxin_001/article/details/104754262