环境需求：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. 基于jeesite的cms系统（二）：整体设计

    一.菜单设计 在系统管理-菜单管理中可以设置内容管理菜单(自动生成) 注意:归属模块应属于核心模块core.如果新加的的菜单设置为内容管理模块cms,系统下次重启时会重置本次设置,具体原因不详. 二. ...

  2. swift 4 生成随机数的内置方法汇总

    第一种是drand48(),不接收参数, 返回的类型是Double. 就返回 0到1之间的Double类型的随机数.举个例子: //每次点击button,button 的颜色会随机变换. class ...

  3. PyTorch安装

    0 - 步骤 参考官网,选择好环境配置按照给定命令安装即可. 1 - 参考资料 https://pytorch.org/

  4. QQ小橙团队排表机器人使用方法

    版权声明 别瞎JB玩坏了...一个群一个群导入很累的 联系QQ: 986859110 目录 网页版使用说明 登录和权限操作 团队和模板选择操作 模板使用案例 团队面板操作 老板管理 人员管理 QQ群机 ...

  5. “放到桌面”的Servlet实现

    复习下Servlet下载文件, 当response把ContentType设置成application/xxxx的时候呢,浏览器会默认启动下载,而不是试图打开. 通过给httpHeader里面加入内容 ...

  6. Java编程思想(前十章)

    Java编程思想 有C++编程基础的条件下, 前10章可以快速过一下,都是基本语法,不需要花太多时间. 着重中后段的一些章节,类型信息.泛型.容器.IO.并发等. 中文翻译版 阅读地址 对于一个架构师 ...

  7. 写一个python 爬虫爬取百度电影并存入mysql中

    目标是利用python爬取百度搜索的电影 在类型 地区 年代各个标签下 电影的名字 评分 和图片连接 以及 电影连接 首先我们先在mysql中建表 create table liubo4( id in ...

  8. 对于JavaBean+Servlet+SqlServer的代码总结和打包调用

    日期:2019.3.24 博客期:049 星期日 说起来我已经说过很多次前台的应用技术了呢!这一次我是要将这一部分打包,做成配套的制作工具: 当前我已经打包成功,想要下载的同学可以进入我的GitHub ...

  9. 【原创】用python连接thrift Server 去执行sql的问题总汇

    场景:python和现有产品的结合和应用——python的前瞻性调研 环境:centos7 0.首先确保安装了python和pyhive,下面是连接代码: #!/usr/bin/env python ...

  10. mysql5.7版本开始创建用户需要create user

    mysql5.7版本开始创建用户需要create user 5.7版本之后,直接使用:grant select on MySQL.test01 to hug@localhost; 是不行的,会报错: ...