一、WebSocket介绍

WebSocket是一种在单个TCP连接实现了服务端和客户端进行双向文本或二进制数据通信的一种通信的协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
 

一次请求 - 服务器收到请求 开始和客户端握手 - 保持长连接 - 数据实时 - 连接永远保持
优点：长连接 并且不影响 收发请求
缺点：连接保持，是需要资源的

二、 Flask 实现 WebSocket的基本用法

from geventwebsocket.server import WSGIServer  # 我要WSGI为我提供服务

from geventwebsocket.handler import WebSocketHandler  # WSGI 遇到 WS协议的时候，处理方式

from geventwebsocket.websocket import WebSocket  # 语法提示

# 基于 Flask + geventwebsocket

from flask import Flask,request,render_template

app = Flask(__name__)

if __name__ == '__main__':

    # app.run()

    # 启动服务

    http_serv = WSGIServer(("0.0.0.0", 7856),application=app, handler_class=WebSocketHandler)

    http_serv.serve_forever()

三、Python + Flask 实现 WebSocket 通讯

1、实现简单群聊

后端代码 my_ws_ql.py:

from geventwebsocket.server import WSGIServer  # 我要WSGI为我提供服务

from geventwebsocket.handler import WebSocketHandler  # WSGI 遇到 WS协议的时候，处理方式

from geventwebsocket.websocket import WebSocket  # 语法提示

# 基于 Flask + geventwebsocket

from flask import Flask,request,render_template

app = Flask(__name__)

# 存储访问的连接

user_socket_list = []

@app.route('/ws')

def my_ws_func():

    user_socket = request.environ.get('wsgi.websocket')  # type:WebSocket

    #

    user_socket_list.append(user_socket)

    # web + socket

    print(user_socket)

    # 浏览器发起的http请求 None

    # 用前端js发送的ws请求 <geventwebsocket.websocket.WebSocket object at 0x0000000003ADF2B8>

    while 1:

        msg = user_socket.receive()  # 等待接收客户端发送过来的消息

        for i in user_socket_list:

            # # 剔除自己的连接(不给自己推送自己发的消息，这样自己就看不到自己发的消息只能看到其他人发的)

            # if i == user_socket:

            #     continue

            # 当循环到死链接时会抛出异常，这里捕捉一下，出现异常直接continue

            try:

                # 给其他连接推送消息

                i.send(msg)

            except:

                continue

        print(msg)

@app.route('/group_chat')

def group_chat():

    return render_template('group_chat.html')

if __name__ == '__main__':

    # app.run()

    http_serv = WSGIServer(("0.0.0.0", 7856),application=app, handler_class=WebSocketHandler)

    http_serv.serve_forever()

前端模板代码 group_chat.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>发送消息>>> <input type="text" id="message"><button onclick="send_msg()">发送</button></p>

    <div id="message_list" style="width:500px;">

    </div>

</body>

<script type="text/javascript">

    var ws = new WebSocket("ws://192.168.15.37:7856/ws");

    // 当ws 收到消息时执行 onmessage 属性

    ws.onmessage = function (event) {

        console.log(event.data);

        // 创建p标签，将接收到的消息加入p标签中

        var ptag = document.createElement("p");

        ptag.innerText = event.data;

        // 将创建的p标签添加到页面中

        var divtag = document.getElementById('message_list');

        divtag.appendChild(ptag);

    };

    function send_msg() {

        // 发送消息的函数

        var msg = document.getElementById('message').value;

        ws.send(msg);

    }

</script>

</html>

2.实现简单的单独通讯

my_ws.py

import json

from geventwebsocket.server import WSGIServer  # 我要WSGI为我提供服务

from geventwebsocket.handler import WebSocketHandler  # WSGI 遇到 WS协议的时候，处理方式

from geventwebsocket.websocket import WebSocket  # 语法提示

from flask import Flask, render_template, request

app = Flask(__name__)

# user_socket_dict = {"ZWQ":<geventwebsocket.websocket.WebSocket object at 0x000002699374A730>,

# "清风徐来":<geventwebsocket.websocket.WebSocket object at 0x000002699374A5F8>}

user_socket_dict = {}

@app.route('/ws/<nickname>')

def my_ws_func(nickname):

    user_socket = request.environ.get("wsgi.websocket") # type: WebSocket

    user_socket_dict[nickname] = user_socket

    print(len(user_socket_dict), user_socket_dict)

    # web + socket

    # print(user_socket)

    while 1:

        msg = user_socket.receive()  # 等待接收客户端发送过来的消息

        print(msg)

        msg = json.loads(msg)  # Dict

        """

        Dict

        {

            to_user:ZWQ

            from_user:清风徐来

            message: "我是清风徐来发给ZWQ的一条消息"

        }

        """

        to_user_socket = user_socket_dict.get(msg.get("to_user"))  # 获取发送地址

        msg_json = json.dumps(msg)

        to_user_socket.send(msg_json)

@app.route('/private_chat')

def privatre_chat():

    return render_template('private_chat.html')

if __name__ == '__main__':

    http_ws = WSGIServer(("0.0.0.0",7856), application=app,handler_class=WebSocketHandler)

    http_ws.serve_forever()

模板代码 private_chat.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <p>登录名 ：<input type="text" id="nick"> <button onclick="login()">登录</button></p>

    <p> 给 <input type="text" id="to_user"> </p>

    <p> 发送消息: <input type="text" id="message"><button onclick="send_msg()">发送</button> </p>

    <div id="message_list" style="width: 500px">

    </div>>

</body>

<script type="text/javascript">

    var ws = null;

    function send_msg() {

        var msg = document.getElementById('message').value;

        var to_user = document.getElementById('to_user').value;

        var nick = document.getElementById('nick').value;

        var msg_obj = {

            to_user:to_user,

            from_user:nick,

            msg:msg

        };

        var msg_json = JSON.stringify(msg_obj);

        ws.send(msg_json);

    }

    function login() {

        var nick = document.getElementById("nick").value;

        ws = new WebSocket("ws://192.168.15.33:7856/ws/"+nick);

        // 收到消息执行onmessage属性

        ws.onmessage = function (event) {

            data_obj = JSON.parse(event.data); // 将JSON数据反序列化

            var ptag = document.createElement('p');

            ptag.innerText = data_obj.from_user + ":" + data_obj.msg;

            var divtag = document.getElementById('message_list');

            divtag.appendChild(ptag);

        }

    }

</script>

</html>

Flask 实现 WebSocket 通讯---群聊和私聊的更多相关文章

  1. websocket实现群聊和单聊(转)

    昨日内容回顾 1.Flask路由 1.endpoint="user" # 反向url地址 2.url_address = url_for("user") 3.m ...

  2. 一例完整的websocket实现群聊demo

    前言 业余我都会花一些时间在tcp.http和websocket等领域的学习,现在觉得有点收获,所以把一个基于websocket的群聊功能的例子提供给大家玩玩.当然这是一个很完整的例子,包括webso ...

  3. Flask+WebSocket实现群聊与单聊功能

    在开始我们的程序代码之前,先来了解一下相关的基础知识: 1.什么是websocket? (1)WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议.WebSocket ...

  4. Websocket实现群聊、单聊

    Websocket 使用的第三方模块:gevent-websocket 群聊 ws群聊.py中的内容 from flask import Flask, request, render_template ...

  5. websocket实现群聊

    server # @File: 群聊 from flask import Flask, render_template, request from geventwebsocket.handler im ...

  6. Flask实现简单的群聊和单聊

    Flask是使用python写的一个简单轻量级的框架,今天我们使用Flask实现一个简单的单聊和群聊功能 . 主要思路 : 前端登录聊天室,聊天室信息包含用户的登录信息,相当于一个登录功能,会把这个信 ...

  7. Android中脱离WebView使用WebSocket实现群聊和推送功能

    WebSocket是Web2.0时代的新产物,用于弥补HTTP协议的某些不足,不过他们之间真实的关系是兄弟关系,都是对socket的进一步封装,其目前最直观的表现就是服务器推送和聊天功能.更多知识参考 ...

  8. WebSocket群聊与单聊

    一 . WebSocket实现群聊 py文件代码 # py文件 from flask import Flask, render_template, request from geventwebsock ...

  9. spring websocket 和socketjs实现单聊群聊,广播的消息推送详解

    spring websocket 和socketjs实现单聊群聊,广播的消息推送详解 WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随 ...

随机推荐

  1. Apache虚拟主机/端口多开

    Apache就是强大啊,简单配置一下就可以再开启另一个端口的web服务. 笔者最近使用XAMPP架设php服务端.有一些特别的需求:同样的代码,需要开始不同的端口, 协议类型提供web服务给客户端(h ...

  2. CentOS7下部署NTP Server

    系统环境:CentOS Linux release 7.4.1708 (Core) 3.10.0-693.el7.x86_64 软件版本:chrony-3.1-2.el7.centos.x86_64 ...

  3. ftp sftp vsftp

    ftp  sftp (secure)  是文件传输 协议 vsftp(very secure) 是 ftp 服务端 sftp 是 ssh 的一部分

  4. 2018.07.06 POJ 1459 Power Network（多源多汇最大流）

    Power Network Time Limit: 2000MS Memory Limit: 32768K Description A power network consists of nodes ...

  5. python面向对象-4类的继承与方法的重载

    1.类的继承与方法的重载 上面就是先定义了一个类A,然后由定义了一个类B,B继承了类A,这样B就有了A的非私有属性和方法. class Washer: company='ZBL' def __init ...

  6. mysql 经典错误解决方案 :Incorrect string value 'xE6x95x85xE4xBAx8B...' for column

    1.关闭当前服务器2.删除正在使用的数据库drop database 数据库名字;3.查看字符集, SHOW VARIABLES LIKE 'character_set_%'; 把所有latin1的都 ...

  7. Windows命令行参数（不断更新）

    这里先讲一下系统变量: 注意:一旦将路径加入到环境变量Path中,那么运行它下面的程序的时候就不用非得指定到目标路径中,直接键入命令就行了. 1.type命令:打开并读取文件里面的内容. C:\Use ...

  8. 微信post xml 消息编码问题

    site:mp.weixin.qq.com utf 微信卡券接口说明 - 微信公众平台开发者文档 所有API接口POST的数据只支持utf8编码,否则会返回报错. 以上是获取的部分信息 这个尽管有点模 ...

  9. Swift中的闭包（Closure）[转]

    闭包在Swift中非常有用.通俗的解释就是一个Int类型里存储着一个整数,一个String类型包含着一串字符,同样,闭包是一个包含着函数的类型.有了闭包,你就可以处理很多在一些古老的语言中不能处理的事 ...

  10. 为UITextView添加通知..来检测UITextView内容的改变

      self.mTextView =[[UITextView alloc]initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH - 100, 28)];     se ...