环境需求：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. day21双下方法,源码相关,异常处理

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.列举你了解的面向对象中的特殊成员,并为每个写代码示例.'''__init__初始化:class A: d ...

  2. sql server登录名、服务器角色、数据库用户、数据库角色、架构区别联系

    原创链接:https://www.cnblogs.com/lxf1117/p/6762315.html sql server登录名.服务器角色.数据库用户.数据库角色.架构区别联系 1.一个数据库用户 ...

  3. 记一次安装python umysql模块的报错

    今天,在写一个python脚本的时候要用到数据库相关的umysql模块,但在引用的时候报没有此模块,第一反应就是去安装此模块,但是报没有找到pip命令. #pip install umysql -ba ...

  4. linxu下redis安装实战

    redis官网地址:http://www.redis.io/ 最新版本:2.8.3 在Linux下安装Redis非常简单,具体步骤如下(官网有说明): 1.下载源码,解压缩后编译源码. $ wget ...

  5. 【软工作业&思考】关于软工的一些概念性理解暨第一次阅读作业

    概述 项目 内容 本次作业所属课程 2019BUAA软件工程 周二班 本次作业要求 第1次个人作业当然,比这个更重要百倍的还是实实在在的思考,这也是标题如此命名的原因 我在本课程的目标 在原有实践经验 ...

  6. docker方式mysql设置字符集

    在docker上部署mysql时,mysql的默认字符集是latin1,这样如果日后有中文会出现异常,不能存储等,因为latin1是不支持中文的. 所以需要将字符集调整为utf8. 方法: 首先启动m ...

  7. SqlServer存储过程及函数

    存储过程和函数类似于Java中的方法. ⒈存储过程 一组预先编译好的sql语句的集合,理解成批处理语句. 好处: ①提高代码的重用性 ②简化操作 ③减少了编译次数并且减少了和数据库服务器的连接次数,提 ...

  8. 测试highlightjs主题1

    package top.shaoxiu.scheduleTask; import org.springframework.scheduling.annotation.EnableScheduling; ...

  9. PHP常用函数大全500+

    php usleep() //函数延迟代码执行若干微秒. unpack() //函数从二进制字符串对数据进行解包. uniqid() //函数基于以微秒计的当前时间,生成一个唯一的 ID. time_ ...

  10. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...