1.前端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>

<div style="width: 600px;">

    <input type="text" id="username">

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

</div>

<br>

<div style="width: 600px;">

    给：<input type="text" id="to_user">

    发送：<input type="text" id="msg">

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

</div>

<br>

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

</body>

<script type="application/javascript">

    var ws = null;

    function login() {

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

        // 打印当前登录用户名

        console.log(username);

        // 注意ws/，斜线不要忘记写

        ws = new WebSocket("ws://192.168.13.21:5300/ws/" + username);

        // 打印创建的socket链接

        console.log(ws);

        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>

2.后端PYTHON

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('当前登录账号:',username)

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

    if user_socket:

        user_socket_dict[username] = user_socket

    else:

        pass

    while 1:

        msg = user_socket.receive()

        msg_dict = json.loads(msg)

        msg_dict["from_user"] = username

        to_user = msg_dict.get("to_user")

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

        u_socket.send(json.dumps(msg_dict))

@app.route("/")

def index():

    return render_template("ws.html")

if __name__ == '__main__':

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

    http_serv.serve_forever()

需要借助2个浏览器实现

基于websocket搭建简易群聊的更多相关文章

  1. WebSocket 实现链接 群聊(low low low 版本)

    py 文件: """ 下载 gevent-websocket 0.10.1 基于Flask + geventWebSocket 建立连接,发送消息,实现群消息功能. &q ...

  2. 基于itchat的微信群聊小助手基础开发（一）

    前段时间由于要管理微信群,基于itchat开发了一个简单的微信机器人 主要功能有: 图灵机器人功能 群聊昵称格式修改提示 消息防撤回功能 斗图功能 要开发一个基于itchat的最基本的聊天机器人,在g ...

  3. websocket学习和群聊实现

    WebSocket协议可以实现前后端全双工通信,从而取代浪费资源的长轮询.在此协议的基础上,可以实现前后端数据.多端数据,真正的实时响应.在学习WebSocket的过程中,实现了一个简化版群聊,过程和 ...

  4. 基于WebSocket的简易聊天室

    用的是Flash + WebSocket 哦~ Flask 之 WebSocket 一.项目结构: 二.导入模块 pip3 install gevent-websocket 三.先来看一个一对一聊天的 ...

  5. 基于nginx搭建简易的基于wcf集群的复杂均衡

    很多情况下基于wcf的复杂均衡都首选zookeeper,这样可以拥有更好的控制粒度,但zk对C# 不大友好,实现起来相对来说比较麻烦,实际情况下,如果 你的负载机制粒度很粗糙的话,优先使用nginx就 ...

  6. php+websocket搭建简易聊天室实践

    1.前言 公司游戏里面有个简单的聊天室,了解了之后才知道是node+websocket做的,想想php也来做个简单的聊天室.于是搜集各种资料看文档.找实例自己也写了个简单的聊天室. http连接分为短 ...

  7. 使用Html5下WebSocket搭建简易聊天室

    一.Html5WebSocket介绍 WebSocket protocol 是HTML5一种新的协议(protocol).它是实现了浏览器与服务器全双工通信(full-duplex). 现在,很多网站 ...

  8. Tinychatserver: 一个简易的命令行群聊程序

    这是学习网络编程后写的一个练手的小程序,可以帮助复习socket,I/O复用,非阻塞I/O等知识点. 通过回顾写的过程中遇到的问题的形式记录程序的关键点,最后给出完整程序代码. 0. 功能 编写一个简 ...

  9. 使用java做一个能赚钱的微信群聊机器人（2020年基于PC端协议最新可用版）

    前言 微信群机器人,主要用来管理群聊,提供类似天气查询.点歌.机器人聊天等用途. 由于微信将web端的协议封杀后,很多基于http协议的群聊机器人都失效了,所以这里使用基于PC端协议的插件来实现. 声 ...

随机推荐

  1. 轻松学习JavaScript十四：JavaScript的RegExp对象(正則表達式)

    一RegExp对象概述 RegExp对象表示正則表達式,RegExp是正則表達式的缩写.它是对字符串运行模式匹配的强大工具. RegExp 对象用于规定在文本中检索的内容. 当您检索某个文本时.能够使 ...

  2. 一次httpserver优化的经验和教训（silverlight游戏 - 金庸群侠传X0.5上线记）

    金X因为被推荐到ACFUN游戏排行第一名.并同一时候在17YY.7K7K.U77.17173等各大小游戏站点上线.迎来了在线用户数量的爆炸式增长.眼下各大站点使用外链方式.也就是实际链接到金X官网的s ...

  3. SPOJ QTREE3 lct

    题目链接 题意: 给定n个点 q个询问 以下n-1行给出树边,点有黑或白色.初始化为白色 以下q行: 询问有2种: 1. 0 x 把x点黑变白,白变黑 2.1 x 询问Path(1,x)路径上第一个黑 ...

  4. Atitit.atijson 类库的新特性设计与实现 v3 q31

    Atitit.atijson 类库的新特性设计与实现 v3 q31 1. V1版本---集成了多引擎1 2. V2版本新特性 --bsh脚本化2 3. V3版本新特性---循环引用解决使用fastjs ...

  5. [ci]gitlab安装配置(含gitlab邮件配置)

    gitlab安装配置 参考: https://www.unixhot.com/article/48 原则:简单维护为准,故yum安装gitlab 1,gitlab安装 2,gitlab邮箱配置 1,g ...

  6. C#动态调用WCF接口(2)

    如何使用 1.第一种方式比较简单,而且也是大家喜欢的,因为不需要任何配置文件就可解决,只需知道服务契约接口和服务地址就可以调用. 2.使用Invoke的方式,但是需要在调用客户端配置WCF,配置后在I ...

  7. Unity3d Serialize问题

    备忘: 1. ScriptableOjbect中,由于Serialization的原因,不能使用基类引用来存储子类对象,这样都会导致数据丢失 2. 无法直接对Unity的数据如,vector3, qu ...

  8. ZBarReaderView (转)

    ZBar为我们提供了两种使用方式,一种是直接调用ZBar提供的ZBarReaderViewController打开一个扫描界面,另一种方式是使用ZBar提供的可以嵌在其他视图中的ZBarReaderV ...

  9. 在 Windows 上安装 TensorFlow（转载）

    在 Windows 上安装 TensorFlow windows下配置安装Anaconda+tensorflow Spyder——科学的Python开发环境 Windows7 安装TensorFlow ...

  10. Android Studio 使用笔记：[转] Mac下修改Android Studio 所用的JDK版本

    原文链接:http://www.jianshu.com/p/d8d1d72d0248# 最近项目从Eclipse+Ant构建模式转移到了Android Studio+Gradle构建模式,自然的JDK ...