websocket简单实现聊天

1.多人聊天

from geventwebsocket.handler import WebSocketHandler  # 请求处理WSGI HTTP
from geventwebsocket.server import WSGIServer  # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket  # 语法提示
from flask import Flask, render_template, request

app = Flask(__name__)
socket_dict = {}

@app.route("/ws")
def my_ws():
    ws_socket = request.environ.get("wsgi.websocket")# type:WebSocket
    socket_dict[ws_socket] = ws_socket
    while True:
        msg = ws_socket.receive()
        print(msg)
        for ksocket in socket_dict:
            if ksocket == ws_socket:
                continue
            ksocket.send(msg)


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

if __name__ == "__main__":

    http_serv = WSGIServer(("0.0.0.0", 9527), app, handler_class=WebSocketHandler)
    # WebSocketHandler既支持websocket请求，也支持http请求
    http_serv.serve_forever()  # wsgi启动服务

View Code

<!--websocket中的事件-->
ws.onmessage 当ws客户端收到消息时执行回调函数
ws.onopen 当ws客户端建立完成连接时 status == 1 时执行的回调函数
ws.onclose 当ws客户端关闭中或关闭时 执行的回调函数 status == 2,3
ws.onerror 当ws客户端出现错误时

<!--在HTML页面中的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        body #content_list {
            border: solid black;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
{#信息接收位置#}
<div id="content_list"></div>
<!--给button按钮设置一个点击事件-->
<input type="text" id="content">
<button onclick="send_msg()">发送消息</button>
</body>
<script type="application/javascript">
    var ws = new WebSocket("ws://192.168.12.12:9527/ws");
    // 只有192.168.12.12:9527/ws路由地址是变化的，WebSocket("ws://路由地址")是固定的。
    //当客户端接收消息时执行匿名函数
    ws.onmessage = function (messageEvent) {
        console.log(messageEvent.data);
        var my_div = document.getElementById("content_list"); // 声明一个变量，是div标签
        var ptag = document.createElement("p"); // 创建一个p标签
        ptag.innerText = messageEvent.data; //设置p标签中的文本内容为接收到的信息
        my_div.appendChild(ptag); // 把这个p标签添加到div标签中
    };

    //button按钮的点击事件
    function send_msg() {
        var msg = document.getElementById("content").value; // 获取input标签中的值
        ws.send(msg); //发送input框中的内容
        document.getElementById("content").value = "" // 点击后input框中内容清空
    }

</script>
</html>

HTML Code

2.一对一聊天

import json
from geventwebsocket.handler import WebSocketHandler    # 请求处理WSGI HTTP
from geventwebsocket.server import WSGIServer        # 替换Flask原来的WSGI服务
from geventwebsocket.websocket import WebSocket    # 语法提示
from flask import Flask,render_template,request

app = Flask(__name__)
socket_dict = {}
@app.route("/ws/<username>")
def my_ws(username):
    # 获取链接地址
    ws_socket = request.environ.get("wsgi.websocket")  #type:WebSocket
    socket_dict[username] = ws_socket
    while True:
        msg = ws_socket.receive() # 接收浏览器发来的信息
        msg_dict = json.loads(msg) # 将信息反序列化，是字典
        receiver = msg_dict.get("receiver")    # 获取字典中接收人的名字
        receiver_socket = socket_dict.get(receiver) # 从字典中找到接收人名字对应的链接地址
        receiver_socket.send(msg) # 向接收人的链接地址发送信息
@app.route("/wechat")
def wechat():
    return render_template("ws.html")
if __name__ == "__main__":
    http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
    # WebSocketHandler既支持websocket请求，也支持http请求
    http_serv.serve_forever()    # wsgi启动服务

View Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <style>
        body #content_list {
            border: solid black;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
<div id="content_list"></div>
<p>
    昵称:<input type="text" id="username">
    <button onclick="login()">登录聊天室</button>
</p>
给<input type="text" id="receiver">发送<input type="text" id="content">
<button onclick="send_msg()">发送消息</button>
</body>
<script type="application/javascript">
    var ws = null;

    function send_msg() {
        var msg = document.getElementById("content").value;    //获取发送内容
        var receiver = document.getElementById("receiver").value; // 获取接收人名字
        var sender = document.getElementById("username").value;  //获取发送人名字
        // 发送的信息内容
        var send_str = {
            receiver: receiver,
            sender: sender,
            data: msg
        };

        ws.send(JSON.stringify(send_str)); // 将发送的信息json序列化
        var my_div = document.getElementById("content_list");  // 获取div标签
        var ptag = document.createElement("p");  // 创建一个p标签
        ptag.innerText = msg + " : 我";    // 设置p标签中的文本内容
        ptag.style.cssText = "text-align: right";  // p标签设置css样式，文本靠右
        my_div.appendChild(ptag); // 将p标签添加进div标签中
    }

    function login() {
        var username = document.getElementById("username").value;  // 获取登录用户名
        ws = new WebSocket("ws://192.168.12.87:9527/ws/" + username); // 执行websocket服务
        // 当客户端收到消息时，执行匿名函数
        ws.onmessage = function (messageEvent) {
            console.log(messageEvent.data);
            var obj = JSON.parse(messageEvent.data); // 将接收的数据反序列化
            var my_div = document.getElementById("content_list"); // 获取div标签
            var ptag = document.createElement("p");  // 获取p标签
            ptag.innerText = obj.sender + " : " + obj.data;  // 设置p标签中文本内容
            my_div.appendChild(ptag); // 将p标签放到div中
        };
    }
</script>
</html>

html Code

websocket简单实现聊天

猜你喜欢