美文网首页
使用WebSocket建立群聊、单聊 2018-10-18

使用WebSocket建立群聊、单聊 2018-10-18

作者: Mr_Du_Biao | 来源:发表于2018-10-18 16:58 被阅读0次

一、群聊

服务端代码
from flask import Flask, render_template, request,Markup
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler
import json

app = Flask(__name__)
user_socket_dict = {}

@app.route("/")
def index():
    return render_template("ql.html")

@app.route("/ws/<nickname>")
def ws(nickname):
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    if user_socket:     # 如果有链接就把链接人的姓名和链接保存在字典中
        user_socket_dict[nickname] = user_socket
    else:
        return render_template("ql.html", message = "请使用Websocket链接")
    while 1:
        msg = user_socket.receive()   # 接受发送的消息
        msg = json.loads(msg)
        for us_nick_name, socket in user_socket_dict.items():   # type:WebSocket
            if user_socket != socket:   # 不能自己给自己发消息
                try:
                    socket.send(json.dumps({"sender": nickname, "msg": msg["msg"]}))  # 发送消息
                except:
                    continue


if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0", 8008), app, handler_class=WebSocketHandler)
    http_serv.serve_forever()
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1>资源分享群</h1>
<p>{{ message }}</p>
<p>昵称:<input type="text" id="nickname">
    <button onclick="createsocket()">链接群聊</button></p>
    <p>消息:<input type="text" id="send_text"></p>
<button id="send" onclick="send_msg()">发送</button>
<div style="border: 2px solid; width: 500px;height: 800px;" id="text_div"></div>
<script>
    var ws = null;
    function createsocket() {
        var nickname = document.getElementById("nickname").value;  // 用户本人昵称
        ws = new WebSocket("ws://127.0.0.1:8008/ws/"+nickname);  // 建立Websocket链接
        ws.onmessage = function (data) {
            var text_div = document.getElementById("text_div");
            var obj_data = JSON.parse(data.data);
            var add_msg = "<p>" + obj_data.sender + ":" + obj_data.msg + "</p>" ;
            text_div.innerHTML += add_msg;
        }
    }
    function send_msg() {
        var nickname = document.getElementById("nickname").value;
        var msg = document.getElementById("send_text").value;
        var text_div = document.getElementById("text_div");
        var add_msg = "<p style='text-align: right'>" + msg + ":" + nickname + "</p>";
        text_div.innerHTML += add_msg;
        var msg_obj = JSON.stringify({msg:msg});
        ws.send(msg_obj)

    }
</script>
</body>
</html>

二、单聊

服务器代码
from flask import Flask, render_template, request,Markup
from geventwebsocket.websocket import WebSocket
from gevent.pywsgi import WSGIServer
from geventwebsocket.handler import WebSocketHandler
import json

app = Flask(__name__)
user_socket_dict = {}

@app.route("/")
def index():
    return render_template("ql.html")

@app.route("/ws/<nickname>")
def ws(nickname):
    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket
    if user_socket:     # 如果有链接就把链接人的姓名和链接保存在字典中
        user_socket_dict[nickname] = user_socket
    else:
        return render_template("ql.html", message = "请使用Websocket链接")
    while 1:
        msg = user_socket.receive()   # 接受发送的消息
        msg_dic = json.loads(msg)
        to_user = msg_dic.get("to_user")  # 获取要发送消息的人
        to_user_socket = user_socket_dict.get(to_user)  # 获取要发送消息的人的链接
        send_str = json.dumps({"sender":nickname,"msg":msg_dic.get("msg")})
        to_user_socket.send(send_str)

if __name__ == '__main__':
    http_serv = WSGIServer(("0.0.0.0", 8008), app, handler_class=WebSocketHandler)
    http_serv.serve_forever()
客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<h1>资源分享群</h1>
<p>{{ message }}</p>
<p>昵称:<input type="text" id="nickname">
    <button onclick="createsocket()">链接群聊</button></p>
<p>与:<input type="text" id="to_user">聊天</p>
    消息:<input type="text" id="send_text">
<button id="send" onclick="send_msg()">发送</button>
<div style="border: 2px solid; width: 500px;height: 800px;" id="text_div"></div>
<script>
    var ws = null;
    function createsocket() {
        var nickname = document.getElementById("nickname").value;  // 用户本人昵称
        ws = new WebSocket("ws://127.0.0.1:8008/ws/"+nickname);  // 建立Websocket链接
        ws.onmessage = function (data) {
            var text_div = document.getElementById("text_div");
            var obj_data = JSON.parse(data.data);
            var add_msg = "<p>" + obj_data.sender + ":" + obj_data.msg + "</p>" ;
            text_div.innerHTML += add_msg;
        }
    }
    function send_msg() {
        var nickname = document.getElementById("nickname").value;
        var to_user = document.getElementById("to_user").value;
        var msg = document.getElementById("send_text").value;
        var text_div = document.getElementById("text_div");
        var add_msg = "<p style='text-align: right'>" + msg + ":" + nickname + "</p>";
        text_div.innerHTML += add_msg;
        var msg_obj = JSON.stringify({to_user:to_user, msg:msg});
        ws.send(msg_obj)

    }
</script>
</body>
</html>

相关文章

网友评论

      本文标题:使用WebSocket建立群聊、单聊 2018-10-18

      本文链接:https://www.haomeiwen.com/subject/gadszftx.html