环境需求：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. Python编程四大神兽：迭代器、生成器、闭包和装饰器

    生成器 生成器是生成一个值的特殊函数,它具有这样一个特点:第一次执行该函数时,先从头按顺序执行,在碰到yield关键字时该函数会暂停执行该函数后续的代码,并且返回一个值:在下一次调用该函数执行时,程序 ...

  2. HDU-1028 Ignatius and the Princess III(生成函数)

    题意 给出$n$,问用$1$到$n$的数字问能构成$n$的方案数 思路 生成函数基础题,$x^{n}$的系数即答案. 代码 #include <bits/stdc++.h> #define ...

  3. windows 双网卡同时上专网（内网）和外网

    本操作是用网线做专网(内网),无线网卡用于外网 1. 记录有线网卡的网络的网关,例如10.103.14.1 2. 有线网卡必须是手动指定的ip地址,把网关清掉,例如 3. 删除0.0.0.0 路由 r ...

  4. 【项目】Selenium和pymongo复习

    import pymongo client = pymongo.MongoClient(host='localhost',port=27017) db = client.test collection ...

  5. python 文本比对

    # -*- coding:utf-8 -*- import difflib import sys def readfile(filename): try: fileHandle = open(file ...

  6. php获取脚本执行的参数

    在看PHP文档到预定义变量时碰到了$argc和$argv,顺手记录下 getopt()从命令行参数列表中获取选项 $arg = getopt('d:n:'); //只接收d n之后的参数 $num = ...

  7. ZYNQ基础知识一

    参考:UG1181 Zynq-7000 Programable Soc Architrcture Porting Quick Start Guide                           ...

  8. 【原创】大叔经验分享（47）yarn开启日志归集

    yarn开启日志归集功能,除了配置之外 yarn.log-aggregation-enable=true 还要检查/tmp/logs目录是否存在以及权限,尤其是在开启kerberos之后,有些目录可能 ...

  9. 【Git】git rebase报错new blank line at EOF.处理

    执行git rebase报错如下: First, rewinding head to replay your work on top of it... Applying: 本次提交信息 .git/re ...

  10. JSP项目前端优化

    问题:在谷歌浏览器中兼容问题,在点击超链接第一次会跳到头部,第二次点击才能打开的问题. 解决方案:是href的问题,删除href的属性,使用click事件,并添加a的超链接样式. #othera{ c ...