一 . WebSocket实现群聊

　　py文件代码

# py文件

from flask import Flask, render_template, request

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket

from geventwebsocket.exceptions import WebSocketError

from gevent.pywsgi import WSGIServer  

app = Flask(__name__)

user_socket_list = []

@app.route('/index')

def index():

    return render_template('index.html')

@app.route('/my/ws')

def my_ws():

    # 当前端声明WebSocket的时候才有wsgi.websocket

    user_socket = request.environ.get('wsgi.websocket')  # type:WebSocket   # 为了让下面user_socket点的时候有提示

    user_socket_list.append(user_socket)

    print(len(user_socket_list), user_socket_list)

    while 1:

        try:   # 下面用图解释为什么要try

            msg = user_socket.receive()  # 阻塞等待发送信息

        except WebSocketError:

            user_socket_list.remove(user_socket)

            return 'GoodBye'

        for user in user_socket_list:

            if user == user_socket:

                continue

            try:

                user.send(msg)

            except:

                continue

if __name__ == '__main__':

    # 用下面这种方法启动是为了识别并支持websocket

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

    http_server.serve_forever()

　　html代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

</head>

<body>

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

    <button onclick="send_message()">发送</button>

</p>

<div id="chat_list">

</div>

</body>

<script type="application/javascript">

    var ws = new WebSocket('ws://127.0.0.1:9527/my/ws');

    ws.onmessage = function (MessageEvent) {   //当接收到消息的时候执行MessageEvent函数

        var p = document.createElement('p');   // 创建一个p标签

        p.innerText = MessageEvent.data;    // 给p标签里面添加数据

        document.getElementById('chat_list').appendChild(p);  // 把p标签添加到div标签里面

    };

    function send_message() {

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

        ws.send(message)

    }

</script>

</html>

　　不try的时候

　　

　　try之后　　

　　

二 . 单聊

　　py文件

import json

from flask import Flask, render_template, request

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket

from geventwebsocket.exceptions import WebSocketError

from gevent.pywsgi import WSGIServer

app = Flask(__name__)

user_socket_dict = {}

@app.route('/home')

def index():

    return render_template('home.html')

@app.route('/my/ws/<username>')

def my_ws(username):

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

    user_socket_dict[username] = user_socket

    print(len(user_socket_dict), user_socket_dict)

    while 1:

        try:

            msg = user_socket.receive()  # 阻塞等待消息

            # print(msg, type(msg))

            msg_dict = json.loads(msg)

            to_user = msg_dict.get('to_user')

            to_user_socket = user_socket_dict.get(to_user)

            to_user_socket.send(msg)

        except WebSocketError:

            user_socket_dict.pop(username)

            return 'GoodBye'

if __name__ == '__main__':

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

    http_server.serve_forever()

　　html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<p>发送者<input type="text" id="username">

    <button onclick="open_chat()">开始聊天</button>  <!--onclick就是点击执行里面函数-->

</p>

<p>接受者 <input type="text" id="to_user"></p>

<p>

    消息 <input type="text" id="message">

    <button onclick="SendMessage()">发送</button>

</p>

<div id="chat_list">

</div>

</body>

<script type="application/javascript">

    var ws = null;   //声明一个全局变量

    function open_chat() {

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

        ws = new WebSocket('ws://127.0.0.1:9527/my/ws/' + username);

        ws.onopen = function () {   // onopen函数就是当你连接开始时执行

            alert('欢迎' + username + '来到午夜激情聊天室!')

        };

        ws.onmessage = function (MessageEvent) {

            var chat = JSON.parse(MessageEvent.data);

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

            p.style.cssText = 'width:270px;text-align: left';

            p.innerText = chat.from_user + '->' + chat.message;

            document.getElementById('chat_list').appendChild(p);

        };

        ws.onclose = function () {  // onclose函数就是如果断开连接了执行函数

            // 断开连接

            console.log('已经断开连接');

        };

    }

    function SendMessage() {

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

        var from_user = document.getElementById('username').value;

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

        var send_str = {

            from_user: from_user,

            to_user: to_user,

            message: message

        };

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

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

        p.style.cssText = 'width:270px;text-align:right';

        p.innerText = send_str.message + '<-大帅比';

        document.getElementById('chat_list').appendChild(p);

    }

</script>

</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. .NET Core 控制台应用程序使用异步（Async）Main方法

    C# 7.1 及以上的版本允许我们使用异步的Main方法. 一.新建一个控制台应用程序 二.异步Main方法 我们直接将Main方法改为如下: static async Task Main(strin ...

  2. Vue不能检测数组或对象变动问题的解决

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 强化学习（五）用时序差分法（TD）求解

    在强化学习(四)用蒙特卡罗法(MC)求解中,我们讲到了使用蒙特卡罗法来求解强化学习问题的方法,虽然蒙特卡罗法很灵活,不需要环境的状态转化概率模型,但是它需要所有的采样序列都是经历完整的状态序列.如果我 ...

  4. Ubuntu下搜狗输入法的安装教程

            前面写过一篇centos7下搜狗输入法的安装教程,现在把搜狗输入法在Ubuntu下的安装方法也记录一下,相比之下Ubuntu下安装搜狗输入法要简便得多 安装fcitx以支持搜狗输入法 ...

  5. Linux 命令行

    Linux 命令笔记 一.目录/文件 1.1 目录文件日常操作 . -> 当前目录 .. -> 上一级目录 .file/.dir -> 隐藏文件/文件夹 [ls] 查看指定目录文件 ...

  6. 创建索引CreateIndex

    nuget引用NEST new一个客户端 源码可查ElasticClient.cs new一个ElasticClient有多种方式 第一种 ES地址是http://localhost:9200,可以直 ...

  7. Java虚拟机判定对象存活算法

    1.引用计数算法 描述:给对象中添加一个引用计数器,每当有一个地方引用它时,计数器值就加1:当引用失效时,计数器值就减1:任何时刻计数器值为0的对象就是不可能再被使用的. 特点:实现简单,判定效率高. ...

  8. oracle非正常退出后重启实例

    sqlplus /nolog 回车 conn / as sysdba 回车 startup 回车(如果被告知已启动,应先执行 shutdown immediate 回车)

  9. Nginx + Keepalived实现应用高可用负载均衡功能

    说明:此处仅介绍 Keepalived 实现nginx负载均衡器的高可用,关于nginx介绍和负载均衡实现可查看我的另两篇博文 Nginx负载均衡 和 Nginx配置了解 应用背景:实现高可用,避免单 ...

  10. Mac Java Idea 下面Git配置简要教程

    Mac Java Idea 配置简要教程(Sunplay) 1.找到git路径 终端输入:which git 2.在idea的设置git路径 3.测试Git的效果 测试Git成功的效果