一 . WebSocket实现群聊

　　py文件代码

  1. # py文件
  2. from flask import Flask, render_template, request
  3. from geventwebsocket.handler import WebSocketHandler
  4. from geventwebsocket.websocket import WebSocket
  5. from geventwebsocket.exceptions import WebSocketError
  6. from gevent.pywsgi import WSGIServer  
  7.  
  8. app = Flask(__name__)
  9.  
  10. user_socket_list = []
  11.  
  12. @app.route('/index')
  13. def index():
  14.     return render_template('index.html')
  15.  
  16. @app.route('/my/ws')
  17. def my_ws():
  18.     # 当前端声明WebSocket的时候才有wsgi.websocket
  19.     user_socket = request.environ.get('wsgi.websocket')  # type:WebSocket   # 为了让下面user_socket点的时候有提示
  20.     user_socket_list.append(user_socket)
  21.     print(len(user_socket_list), user_socket_list)
  22.  
  23.     while 1:
  24.         try:   # 下面用图解释为什么要try
  25.             msg = user_socket.receive()  # 阻塞等待发送信息
  26.         except WebSocketError:
  27.             user_socket_list.remove(user_socket)
  28.             return 'GoodBye'
  29.         for user in user_socket_list:
  30.             if user == user_socket:
  31.                 continue
  32.             try:
  33.                 user.send(msg)
  34.             except:
  35.                 continue
  36.  
  37. if __name__ == '__main__':
  38.     # 用下面这种方法启动是为了识别并支持websocket
  39.     http_server = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)
  40.     http_server.serve_forever()

　　html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6. </head>
  7. <body>
  8. <p><input type="text" id="message">
  9.     <button onclick="send_message()">发送</button>
  10. </p>
  11. <div id="chat_list">
  12.  
  13. </div>
  14. </body>
  15. <script type="application/javascript">
  16.     var ws = new WebSocket('ws://127.0.0.1:9527/my/ws');
  17.     ws.onmessage = function (MessageEvent) {   //当接收到消息的时候执行MessageEvent函数
  18.         var p = document.createElement('p');   // 创建一个p标签
  19.         p.innerText = MessageEvent.data;    // 给p标签里面添加数据
  20.         document.getElementById('chat_list').appendChild(p);  // 把p标签添加到div标签里面
  21.     };
  22.  
  23.     function send_message() {
  24.         var message = document.getElementById('message').value;
  25.         ws.send(message)
  26.     }
  27. </script>
  28. </html>

　　不try的时候

　　

　　try之后　　

　　

二 . 单聊

　　py文件

  1. import json
  2. from flask import Flask, render_template, request
  3. from geventwebsocket.handler import WebSocketHandler
  4. from geventwebsocket.websocket import WebSocket
  5. from geventwebsocket.exceptions import WebSocketError
  6. from gevent.pywsgi import WSGIServer
  7.  
  8. app = Flask(__name__)
  9. user_socket_dict = {}
  10.  
  11. @app.route('/home')
  12. def index():
  13.     return render_template('home.html')
  14.  
  15. @app.route('/my/ws/<username>')
  16. def my_ws(username):
  17.     user_socket = request.environ.get('wsgi.websocket')  # type:WebSocket
  18.     user_socket_dict[username] = user_socket
  19.     print(len(user_socket_dict), user_socket_dict)
  20.     while 1:
  21.         try:
  22.             msg = user_socket.receive()  # 阻塞等待消息
  23.             # print(msg, type(msg))
  24.             msg_dict = json.loads(msg)
  25.             to_user = msg_dict.get('to_user')
  26.             to_user_socket = user_socket_dict.get(to_user)
  27.             to_user_socket.send(msg)
  28.         except WebSocketError:
  29.             user_socket_dict.pop(username)
  30.             return 'GoodBye'
  31.  
  32. if __name__ == '__main__':
  33.     http_server = WSGIServer(('0.0.0.0', 9527), app, handler_class=WebSocketHandler)
  34.     http_server.serve_forever()

　　html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <p>发送者<input type="text" id="username">
  10.     <button onclick="open_chat()">开始聊天</button>  <!--onclick就是点击执行里面函数-->
  11. </p>
  12. <p>接受者 <input type="text" id="to_user"></p>
  13. <p>
  14.     消息 <input type="text" id="message">
  15.     <button onclick="SendMessage()">发送</button>
  16. </p>
  17. <div id="chat_list">
  18.  
  19. </div>
  20. </body>
  21. <script type="application/javascript">
  22.     var ws = null;   //声明一个全局变量
  23.     function open_chat() {
  24.         var username = document.getElementById('username').value;
  25.         ws = new WebSocket('ws://127.0.0.1:9527/my/ws/' + username);
  26.         ws.onopen = function () {   // onopen函数就是当你连接开始时执行
  27.             alert('欢迎' + username + '来到午夜激情聊天室!')
  28.         };
  29.         ws.onmessage = function (MessageEvent) {
  30.             var chat = JSON.parse(MessageEvent.data);
  31.             var p = document.createElement('p');
  32.             p.style.cssText = 'width:270px;text-align: left';
  33.             p.innerText = chat.from_user + '->' + chat.message;
  34.             document.getElementById('chat_list').appendChild(p);
  35.         };
  36.         ws.onclose = function () {  // onclose函数就是如果断开连接了执行函数
  37.             // 断开连接
  38.             console.log('已经断开连接');
  39.         };
  40.     }
  41.  
  42.     function SendMessage() {
  43.         var message = document.getElementById('message').value;
  44.         var from_user = document.getElementById('username').value;
  45.         var to_user = document.getElementById('to_user').value;
  46.         var send_str = {
  47.             from_user: from_user,
  48.             to_user: to_user,
  49.             message: message
  50.         };
  51.         ws.send(JSON.stringify(send_str));
  52.         var p = document.createElement('p');
  53.         p.style.cssText = 'width:270px;text-align:right';
  54.         p.innerText = send_str.message + '<-大帅比';
  55.         document.getElementById('chat_list').appendChild(p);
  56.     }
  57. </script>
  58. </html>

　　展示结果:

　　         

WebSocket群聊与单聊的更多相关文章

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

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

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

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

  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 + websocket实现简单的单聊和群聊

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

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

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

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

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

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

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

  9. websocket 实现单聊群聊 以及 握手原理+加密方式

    WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...

随机推荐

  1. Solr 15 - Solr添加和更新索引的过程 (文档的路由细节)

    目录 1 添加文档的细节 1.1 注册观察者 - watcher 1.2 文档的路由 - document route 1.2.1 路由算法 1.2.2 Solr路由的实现类 1.2.3 implic ...

  2. Linux - 通过LVM对磁盘进行动态扩容

    目录 1 LVM是什么 1.1 概念解释 1.2 为什么用LVM 1.2.1 不使用LVM时的扩容思路 1.2.2 使用LVM时的扩容思路 1.3 名词解释 2 普通的挂载磁盘方法 2.1 创建分区的 ...

  3. vue和mpvue

    一.mixins的理解     vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况 ...

  4. 一套代码小程序&Web&Native运行的探索07——mpvue简单调研

    前言 接上文:[一套代码小程序&Native&Web阶段总结篇]可以这样阅读Vue源码 最近工作比较忙,加之上个月生了小孩,小情人是各种折腾他爸妈,我们可以使用的独立时间片不多,虽然这 ...

  5. XSS 绕过技术

    XSS Cross-Site Scripting(XSS)是一类出现在 web 应用程序上的安全弱点,攻击者可以通过 XSS 插入一 些代码,使得访问页面的其他用户都可以看到,XSS 通常是可以被看作 ...

  6. Java笔记（day11）

    异常:是在运行时期发生的不正常情况. 异常类:在java中用类的形式对不正常情况进行了描述和封装对象,描述不正常的情况的类. 异常就是java通过面向对象的思想将问题封装成了对象.用异常类对其进行描述 ...

  7. SpringMVC之入门程序

    SpringMVC之入门程序——使用浏览器展示商品数据 springMVC执行流程(图片来源:https://www.jianshu.com/p/8a20c547e245) 1.创建pojo(商品实体 ...

  8. php禁用函数设置及查看方法详解

    这篇文章主要介绍了php禁用函数设置及查看方法,结合实例形式分析了php禁用函数的方法及使用php探针查看禁用函数信息的相关实现技巧,需要的朋友可以参考下 本文实例讲述了php禁用函数设置及查看方法. ...

  9. CSS的使用方法

    参考资料:http://css.cuishifeng.cn/ 一.CSS的四种引入方式 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用(与链接式 ...

  10. FreeNas搭建踩坑指南（二）

    0x00 权限配置 FreeNas完成后配置用户组及权限,新建用户和用户组后添加Samba共享(Windows模式),无法准确控制权限,尝试在系统中修改权限提示"Operation not ...