在开始我们的程序代码之前，先来了解一下相关的基础知识：

1、什么是websocket？

（1）WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通讯协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准；

（2）在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送；

（3）现在，很多网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP request的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源；

（4）而比较新的技术去做轮询的效果是Comet，使用了AJAX。但这种技术虽然可达到双向通信，但依然需要发出请求，而且在Comet中，普遍采用了长链接，这也会大量消耗服务器带宽和资源；

（5）面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。

2、web socket优点

（1）服务器与客户端之间交换的数据包档头很小，大概只有2字节；

（2）服务器可以主动传送数据给客户端。

3、gevent-websocket介绍；

（1）是使用gevent封装的websocket库；

（2）可以很方便和其他网络框架结合。

好啦，了解以上的基础知识，就开始我们的简单的聊天室代码之路吧！

Test.py

from flask import Flask,render_template,request

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket

from gevent.pywsgi import WSGIServer

import json

app=Flask(__name__)

user_socket_list = []

user_socket_dict = {}

@app.route("/ws/<username>")

def ws(username):

    print(11111,request.environ)

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

    if user_socket:

        user_socket_dict[username] = user_socket

    print(len(user_socket_dict),user_socket_dict)

    while 1:

        msg = user_socket.receive() # 收件人 消息 发件人

        msg_dict = json.loads(msg)

        msg_dict["from_user"] = username

        to_user = msg_dict.get("to_user")

        # chat = msg_dict.get("msg")

        u_socket = user_socket_dict.get(to_user) # type:WebSocket

        u_socket.send(json.dumps(msg_dict))

        # for u_socket in user_socket_list:

        #     if u_socket == user_socket:

        #         continue

        #     try:

        #         u_socket.send(msg)

        #     except:

        #         continue

@app.route("/")

def index():

    return render_template("ws.html")

if __name__ == '__main__':

    # app.run("0.0.0.0",9527,debug=True)

    http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)

    http_serv.serve_forever()

html

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

<input type="text" id="username"> <button onclick="login()">登录聊天室</button>

给<input type="text" id="to_user">发送：<input type="text" id="msg"> <button onclick="send_msg()">发送</button>

<div id="chat_list" style="width: 500px;height: 500px;"></div>

</body>

<script type="application/javascript">

  var ws = null;

  function login() {

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

    ws = new WebSocket("ws://192.168.13.195:9527/ws/"+username);

    ws.onmessage = function (data) {

      console.log(data.data);

      var recv_msg = JSON.parse(data.data);

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

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

      document.getElementById("chat_list").appendChild(ptag);

    }

  }

  function send_msg() {

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

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

    var send_str = {

      "to_user" :to_user,

      "msg":msg

    };

    ws.send(JSON.stringify(send_str));

  }

</script>

</html>

实现的页面如下：

Flask+WebSocket实现群聊与单聊功能的更多相关文章

  1. 一套高可用、易伸缩、高并发的IM群聊、单聊架构方案设计实践

    一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践 一套高可用.易伸缩.高并发的IM群聊.单聊架构方案设计实践-IM开发/专项技术区 - 即时通讯开发者社区! http://www.52im. ...

  2. WebSocket群聊与单聊

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

  3. Websocket实现群聊、单聊

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

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

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

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

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

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

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

  7. 如何用WebSocket实现一个简单的聊天室以及单聊功能

    百度百科中这样定义WebSocket:WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端.简单的说,We ...

  8. flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密

    1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...

  9. flask + websocket实现简单的单聊和群聊

    单聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHand ...

随机推荐

  1. 站内搜索（ELK）之数据目录

    在使用elasticsearch建设站内搜索时,随着数据不断丰富,为了数据管理更加精细化,必须建立并实时维护“数据目录”(在程序设计中对应的叫法“数据字典”). 数据目录需要包含以下几个维度:数据名称 ...

  2. nginx 配置语法

    一.语法规则: location [=|~|~*|^~] /uri/ { … } = 开头表示精确匹配 ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可.nginx不对url做编码 ...

  3. javascript中字符串对象常用的方法和属性

    前言 字符串是一种非常重要的数据类型,在Java等面向对象编程语言中,它代表对象类型,而在javascript中它却是一种基本数据类型,在开发的领域中,我们经常会碰到,无论是前端还是后台.比如后台验证 ...

  4. .Net Core 商城微服务项目系列（一）：使用IdentityServer4构建基础登录验证

    这里第一次搭建,所以IdentityServer端比较简单,后期再进行完善. 1.新建API项目MI.Service.Identity,NuGet引用IdentityServer4,添加类InMemo ...

  5. 自己动手实现智能家居之温湿度数据采集存储（DHT11，MySql）

    [前言] 一个热爱技术的人一定向往有一个科技感十足的环境吧,那何不亲自实践一下属于技术人的座右铭:"技术改变世界". 就让我们一步步动手搭建一个属于自己的"智能家居平台& ...

  6. Go语言入门教程(十)之函数

    Hello 各位小伙伴大家好,我是小栈君,假期一眨眼就过去了.不知道大家玩的是否开心呢? 上次我们讲到了关于Go语言的流程控制,小栈君也希望小伙伴跟着小栈君一步一个脚印的敲一下代码,相互进步.本期我们 ...

  7. linux下安装Elasticsearch

    一.简单介绍: Elasticsearch提供了近乎实时的数据操作和搜索功能,es集群中所有节点可以一起提供索引和搜索功能,能够相互发现彼此和自动地加入到集群中 二.基础概念: 1.索引: 表征的文档 ...

  8. Redis高可用集群方案

    Redis为我们提供了哨兵,它就像一个为我们的Redis服务站岗的人,当主服务器发生异常时,他会通过投票的方式,将从服务节点升为主服务节点.当我们处理好主节点故障并重启时,原来挂掉的主节点,作为新的主 ...

  9. Java8新特性时间日期库DateTime API及示例

    Java8新特性的功能已经更新了不少篇幅了,今天重点讲解时间日期库中DateTime相关处理.同样的,如果你现在依旧在项目中使用传统Date.Calendar和SimpleDateFormat等API ...

  10. 06-01 DeepLearning-图像识别

    目录 深度学习-图像识别 一.人脸定位 二.手工提取特征的图像分类 2.1 识图认物 2.2 传统分类系统的特征提取 2.3 计算机眼中的图像 2.4 什么是图像特征? 2.5 卷积运算 2.6 利用 ...