Websocket articles (based on flask)

Simple 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()

Then you can make a simple call up
Here Insert Picture Description
Here Insert Picture Description

So how do we achieve it through group chat Websocket?

We need to record every socket even up people's link, and then added to the list which, after circulating the list will not own socket link to send a message, this is a concrete way of thinking, Here is the code flow.

"""
@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()

Here front-end code is:

<!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>

So how should we be realized by a single chat Websocket it?

We came through this link every time a user when he registered name record, then his wsgi.websocket to:

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

This way the dictionary record, and then implement demand sent.

Here is the code to achieve:

"""
@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()

Here front-end code is implemented:

<!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 basis of the current version of notes on this end it

Published 12 original articles · won praise 7 · views 167

Guess you like

Origin blog.csdn.net/caiyongxin_001/article/details/104754262