Flask是使用python写的一个简单轻量级的框架,今天我们使用Flask实现一个简单的单聊和群聊功能 .

　　　　主要思路 : 前端登录聊天室,聊天室信息包含用户的登录信息,相当于一个登录功能,会把这个信息记录在url中发送给后端,后端会把登录信息作为识别用户的标志,url中的信息会作为key值存在一个字典中:

　　　　{'111': <geventwebsocket.websocket.WebSocket object at 0x000001AB31716118>, '222': <geventwebsocket.websocket.WebSocket object at 0x000001AB317160B0>}

　　　　单聊也是基于这个key值实现的,如果发送的用户为空则默认为群聊;

一.导入相关的包并实例化一个Flask对象

import json

from flask import Flask, request, render_template

from geventwebsocket.handler import WebSocketHandler

from gevent.pywsgi import WSGIServer

from geventwebsocket.websocket import WebSocket

app = Flask(__name__)    #实例化一个Flask对象

user_socket_dict = {}    #创建一个空字典

二.后端通过request.environ获取前端的所有信息,其中wsgi.websocket对应的值即用户对象,取出这个对象存入字典 :

@app.route('/ws_app/<user_nick>')     #设置Flask路由,前端通过访问这个地址拆解信息,<user_nick>即前端登录聊天室输入的内容

def ws_app(user_nick):

    user_socket = request.environ.get("wsgi.websocket")  # type:WebSocket    #取出environ中的wsgi.websocket对应的值

    user_socket_dict[user_nick] = user_socket         #以<user_nick>为key在字典中插入用户信息
print(user_socket_dict)     #{'111': <geventwebsocket.websocket.WebSocket object at 0x000001AB31716118>, '222': <geventwebsocket.websocket.WebSocket object at 0x000001AB317160B0>}

三.通过receive取出用户要发送的内容并进行json转换,通过get方法取出to_user(要发送的对象的聊天号),如果没有返回0,后边再通过if判断区别单聊还是群聊:如果to_user存在,说明要发给单个用户,否则是群发.　

    while True:

        msg = user_socket.receive()           #取出发送内容

        msg_dict = json.loads(msg)

        to_user = msg_dict.get("to_user",0)   #没有返回0

        if to_user:                           #有发送对象   单聊

            to_user_socket = user_socket_dict.get(to_user)    #用get方法取出

            to_user_socket.send(msg)

        else:                                  #没有发送对象    群聊

            for usocket in list(user_socket_dict.values()):

                usocket.send(msg)

    @app.route('/')

    def index():

    　　return render_template('my_ws.html')

if __name__ == '__main__':

    http_serve = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)

    http_serve.serve_forever()　

四.前端代码

 <body>

 <p><input type="text" id="nick">

     <button onclick="login()">登陆聊天室</button>

 </p>

 发送给：<input type="text" id="to_user">消息：<input type="text" id="send_str">

 <button id="send_btn" onclick="send()">发送消息</button>

 <p>

 <div id="chat_list">

 </div>

 </p>

 </body>

 <script type="application/javascript">

     var ws = null;

     function login() {

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

         ws = new WebSocket("ws://192.168.***.***:9527/ws_app/" + nick);

         ws.onmessage = function (messageEvent) {

             console.log(messageEvent.data);

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

             var message = JSON.parse(messageEvent.data);

             ptag.innerText = message.from_user + " : " + message.message;

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

         };

     }

     function send() {

         var message = document.getElementById("send_str").value;

         var send_str = {

             from_user: document.getElementById("nick").value,

             to_user: document.getElementById("to_user").value,

             message: message

         };

         var json_send_str = JSON.stringify(send_str);

         ws.send(json_send_str);

     }

 </script>

Flask实现简单的群聊和单聊的更多相关文章

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

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

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

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

  3. WebSocket群聊与单聊

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

  4. Websocket实现群聊、单聊

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. Python视频教程免费分享（2020年最新版）

    为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...

  2. [转帖]linux常用命令大全（linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习）

    linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...

  3. [转帖]支撑双11每秒17.5万单事务 阿里巴巴对JVM都做了些什么？

    支撑双11每秒17.5万单事务 阿里巴巴对JVM都做了些什么? https://mp.weixin.qq.com/s?__biz=MzA3OTg5NjcyMg==&mid=2661671930 ...

  4. java积累的细节问题

    一.将几个数字进行拼接,拼接成字符串 一定要将""放到几个数字之前,否则就会把数字相加之后的数转化成字符串 如你需要拼接年份,月份,和日 如果:2018+12+13+"& ...

  5. Java 最常见 200+ 面试题 + 全解析

    本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...

  6. Word 查找替换高级玩法系列之 -- 把论文中的缩写词快速变成目录下边的注释表

    1. 前言 问题:Word写论文如何把文中的缩写快速转换成注释表? 原来样子: 想要的样子: 2. 步骤 使用查找替换高级用法,替换缩写顺序 选中所有文字 打开查找替换对话框,输入以下表达式: 替换后 ...

  7. 20191011-构建我们公司自己的自动化接口测试框架-TestData的数据准备

    创建excel测试数据准备,excel的第一个sheet存储测试集,后面分别为测试用例和断言结果表 测试集构成如下: 按列分别为测试序号,测试用例说明,对应的sheetname,测试用例是否允许,测试 ...

  8. Django中的Object Relational Mapping(ORM)

    ORM 介绍 ORM 概念 对象关系映射(Object Relational Mapping,简称ORM)模式是一种为了解决面向对象与关系数据库存在的互不匹配的现象的技术. 简单的说,ORM是通过使用 ...

  9. 解决springboot乱码和window cmd乱码

    @Bean public FilterRegistrationBean filterRegistrationBean() { FilterRegistrationBean registration = ...

  10. electron窗口相关操作（放大缩小退出，可拖动，可resize等）

    如下是对窗口最大化,最小化等相关操作: import { ipcMain, ipcRenderer, remote } from 'electron' import is from 'electron ...