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

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

  1. from flask import Flask,render_template,request
  2. from geventwebsocket.handler import WebSocketHandler
  3. from geventwebsocket.websocket import WebSocket
  4. from gevent.pywsgi import WSGIServer
  5. import json
  6.  
  7. app=Flask(__name__)
  8.  
  9. user_socket_list = []
  10.  
  11. user_socket_dict = {}
  12.  
  13. @app.route("/ws/<username>")
  14. def ws(username):
  15.     print(11111,request.environ)
  16.     user_socket = request.environ.get("wsgi.websocket") #type:WebSocket
  17.     if user_socket:
  18.         user_socket_dict[username] = user_socket
  19.     print(len(user_socket_dict),user_socket_dict)
  20.     while 1:
  21.         msg = user_socket.receive() # 收件人 消息 发件人
  22.         msg_dict = json.loads(msg)
  23.         msg_dict["from_user"] = username
  24.         to_user = msg_dict.get("to_user")
  25.         # chat = msg_dict.get("msg")
  26.         u_socket = user_socket_dict.get(to_user) # type:WebSocket
  27.         u_socket.send(json.dumps(msg_dict))
  28.  
  29.         # for u_socket in user_socket_list:
  30.         #     if u_socket == user_socket:
  31.         #         continue
  32.         #     try:
  33.         #         u_socket.send(msg)
  34.         #     except:
  35.         #         continue
  36.  
  37. @app.route("/")
  38. def index():
  39.     return render_template("ws.html")
  40.  
  41. if __name__ == '__main__':
  42.     # app.run("0.0.0.0",9527,debug=True)
  43.     http_serv = WSGIServer(("0.0.0.0",9527),app,handler_class=WebSocketHandler)
  44.     http_serv.serve_forever()

html

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9. <input type="text" id="username"> <button onclick="login()">登录聊天室</button>
  10. 给<input type="text" id="to_user">发送：<input type="text" id="msg"> <button onclick="send_msg()">发送</button>
  11. <div id="chat_list" style="width: 500px;height: 500px;"></div>
  12.  
  13. </body>
  14. <script type="application/javascript">
  15.   var ws = null;
  16.  
  17.   function login() {
  18.     var username = document.getElementById("username").value;
  19.     ws = new WebSocket("ws://192.168.13.195:9527/ws/"+username);
  20.     ws.onmessage = function (data) {
  21.       console.log(data.data);
  22.       var recv_msg = JSON.parse(data.data);
  23.       var ptag = document.createElement("p");
  24.       ptag.innerText= recv_msg.from_user + ":" + recv_msg.msg;
  25.       document.getElementById("chat_list").appendChild(ptag);
  26.     }
  27.   }
  28.  
  29.   function send_msg() {
  30.     var to_user = document.getElementById("to_user").value;
  31.     var msg = document.getElementById("msg").value;
  32.     var send_str = {
  33.       "to_user" :to_user,
  34.       "msg":msg
  35.     };
  36.     ws.send(JSON.stringify(send_str));
  37.   }
  38. </script>
  39. </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. thymeleaf 设置display样式

    使用th:style标签: th:style="'display:' + @{(${value} ? 'none' : 'inline-block')} + ''" 其中value ...

  2. 转 Oracle中关于处理小数点位数的几个函数，取小数位数，Oracle查询函数

    关于处理小数点位数的几个oracle函数() 1. 取四舍五入的几位小数 select round(1.2345, 3) from dual; 结果:1.235 2. 保留两位小数,只舍 select ...

  3. SLES15SP1 AutoYast - PXE 技术

    由于最近在做几个Ceph项目,基本都是50个节点起,那我们在项目中经常使用PXE技术来实现系统自动化安装,提高效率,可能有会说PXE技术太老了没什么好了解,但我觉得的很实用,尤其在项目型工程中,通过P ...

  4. CSS3 transform属性

    说明: transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行移动(translate).旋转(rotate).缩放(scale)或倾斜(skew) transition属 ...

  5. ajax 请求前后处理

    1. 介绍 通过 jQuery 提供的 ajaxSetup 方法,我们可以拦截页面上所有的 Ajax 请求响应(包括 $.ajax.$.post.$.get).这样我们可以对这些 Ajax 请求响应做 ...

  6. 快学Scala 第六课 （类getter和setter）

    类getter和setter 如果字段定义是private[this], 字段是私有的,但不生成getter和setter方法. class Counter { private[this] var v ...

  7. Eclipse导入别人项目爆红叉

    1.导入项目之前,请确认工作空间编码已设置为utf-8:window->Preferences->General->Wrokspace->Text file encoding- ...

  8. JVM(五)回收机制

    1.对象的引用 JDK1.2之后,对象的引用分为了四种情况    强引用:Object obj = new Object():只要强引用还在,垃圾回收器就永远不会收集被引用的对象.    软引用:So ...

  9. Cocos Creator 3D 打砖块教程(二) | 子弹发射与摄像机平滑移动

    在线体验链接: http://example.creator-star.cn/block3d/ 前面一篇文章,我们讲了[打砖块]游戏中的3D物体的场景布局.材质资源.物理刚体与碰撞组件,接下来本篇文章 ...

  10. Android实现apk插件方式换肤

    换肤思路: 1.什么时候换肤? xml加载前换肤,如果xml加载后换肤,用户将会看见换肤之前的色彩,用户体验不好. 2.皮肤是什么? 皮肤就是apk,是一个资源包,包含了颜色.图片等. 3.什么样的控 ...