环境需求：flask，websocket第三方包

目录结构

web中实现群聊

ws_群聊.py文件

# 实现一个websocket 先下载包  gevent-websocket

from flask import Flask, request, render_template

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket  # 语法提示作用

from gevent.pywsgi import WSGIServer

import json

app = Flask(__name__)

user_socket_dict = {}  # 定义一字典   user_id：链接

@app.route('/ws/<user>')

def ws(user):

    # print(request.environ)

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

    if user_socket:  # 当用户连接时候

        user_socket_dict[user] = user_socket  # 添加到用户列表

    print(len(user_socket_dict), user_socket_dict)

    while :

        msg = user_socket.receive()  # 接受消息

        print(msg)  # 页面传过来的数据   b"{from_user:jinwangba ,to_user:yinwangba,msg:"doushidawangba"}"

        msg_dict = json.loads(msg)

        to_user_socket = user_socket_dict.get(msg_dict.get("to_user"))

        to_user_socket.send(json.dumps(

            {"from_user": user,

             "to_user": msg_dict.get("to_user"),

             "msg": msg_dict.get("msg"

                                 )}))

@app.route('/')

def index():

    return render_template("ws单聊.html")

if __name__ == '__main__':

    print('服务已启动')

    # app.run("0.0.0.0", , debug=True)

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

    http_serv.serve_forever()  # 永久启动

群聊py文件

前端html页面

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>标题</title>

</head>

<body>

<p>发送内容 <input type="text" id="msg">

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

</p>

<div id="msg_list"  style="width: 500px;">

</div>

</body>

<script type="application/javascript">

    var ws = new WebSocket("ws://192.168.98.1:8080/ws");  //创建ws连接

    ws.onopen = function () {

        // ws.send("hello")   // 连接成功后发送 hello 消息

        alert("欢迎登陆群聊室")

    };

    ws.onmessage = function (ws_status) {

        console.log(ws_status.data);

        var ptag = document.createElement("p");  //创建p标签

        ptag.innerText = ws_status.data;    // 内容是其他用户发送过来的消息

        document.getElementById("msg_list").appendChild(ptag)   // 在div中添加p标签

    };

    function send_msg() {

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

        var ptag = document.createElement("p");  // 创建p标签

        ptag.style.cssText = "text-align: right;";   //位置在右边

        ptag.innerText = msg;   //内容是自己发送的消息

        document.getElementById('msg_list').appendChild(ptag);   //添加自己内容的p标签

        ws.send(msg)  //获取发送消息空内容发送此消息

    }

</script>

</html>

群聊html文件

web中实现单聊

ws_单聊.py文件

# 实现一个websocket 先下载包  gevent-websocket

from flask import Flask, request, render_template

from geventwebsocket.handler import WebSocketHandler

from geventwebsocket.websocket import WebSocket  # 语法提示作用

from gevent.pywsgi import WSGIServer

import json

app = Flask(__name__)

user_socket_dict = {}  # 定义一字典   user_id：链接

@app.route('/ws/<user>')

def ws(user):

    # print(request.environ)

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

    if user_socket:  # 当用户连接时候

        user_socket_dict[user] = user_socket  # 添加到用户列表

    print(len(user_socket_dict), user_socket_dict)

    while :

        msg = user_socket.receive()  # 接受消息

        print(msg)  # 页面传过来的数据   b"{from_user:jinwangba ,to_user:yinwangba,msg:"doushidawangba"}"

        msg_dict = json.loads(msg)

        to_user_socket = user_socket_dict.get(msg_dict.get("to_user"))

        to_user_socket.send(json.dumps(

            {"from_user": user,

             "to_user": msg_dict.get("to_user"),

             "msg": msg_dict.get("msg"

                                 )}))

@app.route('/')

def index():

    return render_template("ws单聊.html")

if __name__ == '__main__':

    print('服务已启动')

    # app.run("0.0.0.0", , debug=True)

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

    http_serv.serve_forever()  # 永久启动

单聊py文件

前端html页面

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>标题</title>

</head>

<body>

<p>发送内容 <input type="text" id="msg">

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

</p>

<div id="msg_list"  style="width: 500px;">

</div>

</body>

<script type="application/javascript">

    var ws = new WebSocket("ws://192.168.98.1:8080/ws");  //创建ws连接

    ws.onopen = function () {

        // ws.send("hello")   // 连接成功后发送 hello 消息

        alert("欢迎登陆群聊室")

    };

    ws.onmessage = function (ws_status) {

        console.log(ws_status.data);

        var ptag = document.createElement("p");  //创建p标签

        ptag.innerText = ws_status.data;    // 内容是其他用户发送过来的消息

        document.getElementById("msg_list").appendChild(ptag)   // 在div中添加p标签

    };

    function send_msg() {

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

        var ptag = document.createElement("p");  // 创建p标签

        ptag.style.cssText = "text-align: right;";   //位置在右边

        ptag.innerText = msg;   //内容是自己发送的消息

        document.getElementById('msg_list').appendChild(ptag);   //添加自己内容的p标签

        ws.send(msg)  //获取发送消息空内容发送此消息

    }

</script>

</html>

群聊html文件

注 ： ws服务连接要根据自己ip实现

还可以了看看原理和基于Tornado实现的方法

https://www.cnblogs.com/wupeiqi/p/6558766.html

简单使用WebSocket实现聊天室的更多相关文章

  1. Ext JS学习第十六天 事件机制event（一） DotNet进阶系列(持续更新) 第一节：.Net版基于WebSocket的聊天室样例 第十五节：深入理解async和await的作用及各种适用场景和用法 第十五节：深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G

    code&monkey   Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...

  2. 基于WebSocket实现聊天室(Node)

    基于WebSocket实现聊天室(Node) WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力 ...

  3. websocket+golang聊天室

    原文地址: http://www.niu12.com/article/3 websocket+golang聊天室 main.go和index.html放在同一目录下 main.go package m ...

  4. WebSocket 网页聊天室

    先给大家开一个原始的websocket的连接使用范例 <?php /* * recv是从套接口接收数据,也就是拿过来,但是不知道是什么 * read是读取拿过来的数据,就是要知道recv过来的是 ...

  5. 关于websocket制作聊天室的的一些总结

    websocket的总结 在一个聊天室系统中,常常使用websocket作为通信的主要方式.参考地址:https://www.jianshu.com/p/00e... 关于自己的看法:websocke ...

  6. 第一节：.Net版基于WebSocket的聊天室样例

    一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...

  7. 基于webSocket的聊天室

    前言 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的.在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费 ...

  8. WebSocket 网页聊天室的实现（服务器端：.net + windows服务，前端：Html5）

    websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器 ...

  9. Django用websocket实现聊天室之筑基篇

    最近闲来无事,无意发现一个聊天室的前端UI,看着挺好看的但是没有聊天室的通信代码,于是想给它安装电池(通信部分),先看UI: 开始通信部分的工作: 使用的组件: Django1.11.13 chann ...

随机推荐

  1. nginx:[emerg]unknown directive "ssl"

    nginx: [emerg] unknown directive "ssl" in /usr/local/nginx/conf/nginx.conf:102 到解压的nginx目录 ...

  2. Swagger Edit 安装和使用教程

    Swagger Edit介绍Swagger是专门用来管理接口一个工具.在开发过程中,接口一直是纷争的聚焦点,能有效管理接口(保存好记录.及时更新.方便查看.接口测试).会让整个项目开发效率提升很大. ...

  3. 推送提交（git push）

    当需要同别人共享某个分支上的工作成果时,就要把它推送到一个具有写权限的远程仓库.你的本地分支并不会自动同步到远程仓库,必须要显式地推送那些你想要与别人共享的分支.这样一来,你可以使用私有分支做一些不想 ...

  4. pyenv安装及常用命令

    1.pyenv安装 #下载安装脚本curl https://pyenv.run | bash #添加环境变量 echo 'export PATH="/root/.pyenv/bin:$PAT ...

  5. docker安装redis

    查询镜像 docker search redis 拉取镜像 docker pull redis 启动容器 docker run --name redis -p 6379:6379 -d --resta ...

  6. js较深入的知识点

    浏览器渲染过程是怎样的?重绘重排是什么?如何避免过多的重绘重排? 将html解析为dom树; 将css解析为cssom; 结合DOM树和CSSOM树,生成一棵渲染树(Render Tree); 生成布 ...

  7. Jmeter、Postman 、 loadrunner SoapUI 接口测试工具

    一. loadrunner  简称 LR 二. Jmeter 1.安装包:apache-jmeter-4.0.tgz   解压.学会此工具的使用  和POSTman 一样的. 2.本机测试:双击apa ...

  8. 从输入URL到浏览器显示页面发生了什么

    1.输入网址 当你开始输入网址比如www.cnblogs.com时游览器就可以在书签或者历史记录里面去搜索相关的网址推荐给你. 2.游览器查找域名的IP地址 ① 请求发起后,游览器首先会解析这个域名, ...

  9. OnePlus5刷机后一直检查更新

    大概是由于爱折腾,上一个手机是Nexus5,现在又是Oneplus5,闲来无事就爱刷机. 昨天看OnePlus官网的氧OS更新到Android9.0,于是又开启了刷机旅程. 显然这次没有之前那么顺利, ...

  10. 论文笔记：Image Smoothing via L0 Gradient Minimization

    今天要分享的这篇论文是我个人最喜欢的论文之一,它的思想简单.巧妙,而且效果还相当不错.这篇论文借助数学上的 \(L_0\) 范数工具对图像进行平滑,同时保留重要的边缘特征,可以实现类似水彩画的效果(见 ...