环境需求：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. 第一节. .Net Core环境的安装和常用指令

    一. 环境介绍和安装 1. 环境介绍 .Net FrameWork框架:BCL(基础类库 system.dll).CLR(运行时 仅支持:Windows).FCL(一些框架,比如:MVC.WPF) . ...

  2. day20面向对象三大特性 , 类嵌套

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 1.简述面向对象三大特性并用代码表示."""封装:class Account: ...

  3. spring-cloud-sleuth 和 分布式链路跟踪系统

    ==================spring-cloud-sleuth==================spring-cloud-sleuth 可以用来增强 log 的跟踪识别能力, 经常在微服 ...

  4. IDEA中debug启动tomcat报错。Error running t8:Unable to open debugger port(127.0.0.1:49225):java.net.BindException"Address alread in use:JVM_Bind"

    解决办法: 1,如下图打开项目配置的tomcat的“Edit Configurations...” 2,打开“Startup/Connection”--------"Debug"- ...

  5. 文件上传(StringMVC)

    我们经常会使用的一个功能是文件下载,既然有文件下载就会有文件上传,下面我们来看一下文件上传是如何实现的 首先准备好一个页面 jsp <style type="text/css" ...

  6. Windows Hook技术

    0x01 简介 有人称它为“钩子”,有人称它为“挂钩”技术.谈到钩子,很容易让人联想到在钓东西,比如鱼钩就用于钓鱼.编程技术的钩子也是在等待捕获系统中的某个消息或者动作.钩子的应用范围非常广泛,比如输 ...

  7. rsync + sersync 实现实时数据同步

    一.环境: 主机1:youzhuan-bak     centos 7.2 主机2:youzhuan-online   centos 7.2 二.部署过程: youzhuan-bak : [root@ ...

  8. 2018-2019-2 20165234 《网络对抗技术》 Exp5 MSF基础应用

    实验五 MSF基础应用 实验内容 本实践目标是掌握metasploit的基本应用方式,重点常用的三种攻击方式的思路.具体需要完成: 1.一个主动攻击实践,ms08_067(成功) 2. 一个针对浏览器 ...

  9. 2018-2019-2 网络对抗技术 20165337 Exp1 PC平台逆向破解（BOF实验）

    实验内容 直接修改程序,跳转到getShell函数. 使用BOF攻击,覆盖返回地址,触发getShell函数. 注入一个自己的shellcode并运行. 任务一:直接修改程序,跳转到getShell函 ...

  10. PHP 【六】

    命名空间 教学网站的内容不知道再怎么“笔记化”,用之即可 面向对象 类定义 创建对象  $xxx = new 类名: 调用成员方法  $xxx->方法名(参数): 举例: <?php cl ...