单聊:

　　前端:

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta http-equiv="content-Type" charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<p>您的昵称：<input type="text" id="nick"><button onclick="openws()">进入聊天室</button></p>

<p>给<input type="text" id="to_user">发送：<input type="text" id="message"><button onclick="send_msg()">发送消息</button></p>

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

</div>

</body>

<script type="application/javascript">

    var ws = null;

    // ws.onopen = function(){

    //   alert("欢迎来到群喷");

    // };

    function openws(){

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

        ws = new WebSocket("ws://192.168.12.10:5000/ws/"+nick);

        ws.onmessage = function (ws_status) {

            console.log(ws_status.data);

            var msg_obj = JSON.parse(ws_status.data);

            var ptag = document.createElement("p");

            ptag.innerText = msg_obj.from_user + " : " +msg_obj.msg;

            document.getElementById("msg_list").appendChild(ptag);

        };

    }

    function send_msg() {

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

        var from_user = document.getElementById("nick").value;

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

        var ptag = document.createElement("p");

        ptag.style.cssText = "text-align: right;";

        ptag.innerText = msg + " : "+ from_user;

        document.getElementById("msg_list").appendChild(ptag);

        var msg_obj = {

            msg:msg,

            from_user:from_user,

            to_user:to_user

        };

        ws.send(JSON.stringify(msg_obj));

    };

</script>

</html>

　　后端:

from flask import Flask,request,render_template

from geventwebsocket.handler import WebSocketHandler

from gevent.pywsgi import WSGIServer

import json

from geventwebsocket.websocket import WebSocket

app = Flask(__name__)

user_socket_dict = {

}

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

def ws(user):

    user_socket = request.environ.get('wsgi.websocket')  #原请求

    if user_socket:

        user_socket_dict[user] = user_socket

    while 1:

        msg = user_socket.receive()

        msg_dict = json.loads(msg)

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

        to_usocket.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_one.html")

if __name__ == '__main__':

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

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

    http_serv.serve_forever()

多聊:

　　前端

<!DOCTYPE html>

<html lang="zn-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="x-ua-compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

    <p>发送内容: <input type="text" id="message"> <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.12.10:5000/ws");

    // ws.onopen = function(){                //当打开的时候发送消息

    //     ws.send('hello')

    // };

    ws.onmessage = function (ws_status) {

        console.log(ws_status.data);

        var ptag = document.createElement('p');

        ptag.innerText = ws_status.data;

        document.getElementById('msg_list').appendChild(ptag)

    };

    function send_msg() {

        var msg = document.getElementById('message').value;

        var ptag = document.createElement('p');

        ptag.style.cssText = 'text-align:right;';

        ptag.innerText = msg;

        document.getElementById('msg_list').appendChild(ptag)

        ws.send(msg)

    }

</script>

</html>

　　后端:

from flask import Flask,request,render_template

from geventwebsocket.handler import WebSocketHandler

from gevent.pywsgi import WSGIServer

from geventwebsocket.websocket import WebSocket

app = Flask(__name__)

user_socker_list = []

@app.route('/ws')

def ws():

    user_socker = request.environ.get('wsgi.websocket')  #type:WebSocket

    if user_socker:

        user_socker_list.append(user_socker)

    print(len(user_socker_list), user_socker_list)

    while 1:

        msg = user_socker.receive()

        print(msg)

        for usocker in user_socker_list:

            if user_socker == usocker:

                continue

            try:

                usocker.send(msg)

            except:

                continue

@app.route('/')

def index():

    return render_template('ws_all.html')

if __name__ == '__main__':

    # app.run(debug=True)

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

    http_serv.serve_forever()

使用websocket实现单聊和多聊的更多相关文章

  1. websocket 实现单聊群聊 以及 握手原理+加密方式

    WebSocket 开始代码 服务端 群聊 # type:WebSocket 给变量标注类型 # websocket web + socket from geventwebsocket.server ...

  2. SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

     SignalR快速入门 ~ 仿QQ即时聊天,消息推送,单聊,群聊,多群公聊(基础=>提升,5个Demo贯彻全篇,感兴趣的玩才是真的学) 官方demo:http://www.asp.net/si ...

  3. flask 第五章 WebSocket GeventWebsocket 单聊群聊 握手 解密 加密

    1.WebSocket 首先我们来回顾一下,我们之前用socket学习过的项目有: 1.django 2.flask 3.FTP - 文件服务 HTTP - TCP (特点): 1.一次请求,一次响应 ...

  4. 基于websocket的单聊.群聊

    关于ai.baidu.com的 代码: #########################################核心代码################################### ...

  5. flask + websocket实现简单的单聊和群聊

    单聊 from flask import Flask,request,render_template from geventwebsocket.handler import WebSocketHand ...

  6. websocket实现单聊

    server# @File: ws from flask import Flask, request, render_template from geventwebsocket.handler imp ...

  7. ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室（三） 之 实现单聊，群聊，发送图片，文件。

    上篇讲解了如何搭建聊天服务器,以及客户端js怎么和layui的语法配合.服务器已经连接上了,那么聊天还会远吗? 进入正题,正如上一篇提到的我们用 Client.Group(groupId)的方法向客户 ...

  8. happyChat开发系列：使用websocket.io实现双向通信的乐聊大前端开发

    一.前言 乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能.因为这个自己做了PC端,无线端(手机端),以及使用cordo ...

  9. netty无缝切换rabbitmq、activemq、rocketmq实现聊天室单聊、群聊功能

    netty的pipeline处理链上的handler:需要IdleStateHandler心跳检测channel是否有效,以及处理登录认证的UserAuthHandler和消息处理MessageHan ...

随机推荐

  1. CentOS 7 搭建本地YUM仓库，并定期同步阿里云源

    目录导航: 1. 系统环境 2. 修改yum 源为阿里云源 3. 安装yum相关的软件 4. 根据源标识同步源到本地目录 5. 安装nginx开启目录权限保证本地机器可以直接本地yum源 6. 客户端 ...

  2. Redis Cluster 获取主从关系

    redis-cli -h 192.168.11.111 -p 6380 -c cluster slots | xargs  -n8 | awk '{print $3":"$4&qu ...

  3. HTML中用自定义字体实现小图标icon(不是原作, 只是一个研究笔记)

    最近在做一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 以前看到这类效果的第一反应就是用一个gif之类的图标做出来!! 但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文 ...

  4. 解析underscore中的debounce

    先奉上源码 取自Underscore.js 1.9.1的debounce _.debounce = function(func, wait, immediate) { var timeout, res ...

  5. python基础数据类型--元组（tuple）

    python基础数据类型--元组(tuple) 一.元组的定义和特性 定义:与列表相似,只不过就是将[ ] 改成 ( ) 特性:1.可以存放多个值 2.不可变 3.按照从左到右的顺序定义元组元素,下标 ...

  6. NAND厂商哭晕：减产也阻止不了跌价

    导读 NAND闪存价格已经连跌了6个季度,这让上游NAND厂商三星.东芝.美光等损失惨重,纷纷削减NAND产能.在群联台北电脑展上,群联公司董事长潘建成也预测NAND闪存价格已经跌破了成本,未来跌幅会 ...

  7. HihoCoder第十三周：最近公共祖先 一

    #1062 : 最近公共祖先·一 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 同城那样神奇,但这个网站仍然让小Ho乐在其中,但这是为什么呢? "为什么呢?& ...

  8. esxi 主机用户功能说明

    1.  root 用户 默认情况下,每个 ESXi 主机都有一个具有管理员角色的 root 用户帐户.该 root 用户帐户可用于本地管理,并可用于将主机连接到 vCenter Server. 此公共 ...

  9. python 小数相加报错 invalid literal for int() with base 10

    for i in column1: x = int(i) s += xprint "sum:",s,"count:",len(column1)# round ( ...

  10. SLAM的评测工具evo

    遇到的问题 今天用orbslam2跑euroc数据集,将结果和真实轨迹用evo测评,发现差别特别大: evo_traj tum data.tum CameraTrajectory.txt --plot ...