专栏首页萝卜大杂烩在线聊天室优化之私聊

在线聊天室优化之私聊

这篇文章距离上一次写在线聊天室系列的最后一篇已经有五个月了,当时就留下了很多坑,比如页面优化,权限优化等等功能都没有做。这期间懒癌附体,一直给自己各种理由去推脱,直到有一天,一位小伙伴来找我,说让我再实现一些高级功能,我才知道原来还真有人会用我的代码,哈哈,立刻就有干劲了有木有。

不过到年底了,确实有点忙(为自己的菜强行找借口

),匆忙之间代码写的有点渣,不过还是先实现了私聊的功能。

实现思路

对于私聊,我觉得应该有如下两点需要实现

  • 私聊列表更新 每个人都需要有一个私聊的列表,并且需要准实时的更新,这样这个人才能知道当前谁准备和自己私聊,以及自己正在私聊的人。
  • 私聊聊天室 对于私聊的聊天室,其实可以复用群聊的聊天室实现,只不过这个聊天室里只有两个人而已。同时对于消息的传递,同样可以复用群聊中实现的功能。

前端布局

那么既然思路有了,首先就开始布局。这一点对于一个半残前端来说,太楠楠楠了,搞了好久了,只整出这么个布局,略丑,但是也没办法了。

对于不会调样式的我来说,只能对原有的 CSS 代码做些简单的修改了

在原来所有用户列表旁增加一个私聊列表

<div class="chat_pleft">
          <ul class="puser_list" title="" id="pchat">
              <li class="fn-clear selected"><em id="pall">所有私聊</em></li>
              <li class="fn-clear" data-id="112" id="private"><span></span><em>暂时没有任何私聊</em></li>
          </ul>
      </div>

然后再通过调整控件的宽度,来使得新增的 div 显示在聊天框旁边,而不是在下边

.chat_left{ padding:20px; width:-moz-calc(100% - 440px); }
.chat_right{ width:199px; }
.chat_pleft{ width:199px; }

好了,页面布局就说这么多,说多了都是泪。

私聊聊天室

现在开始编写后端逻辑,首先我们要先有一个私聊的聊天室,那么先来改造下 create_room 函数,创建私聊

@main.route('/createroom/', methods=["GET", 'POST'])
@login_required
def create_room(chatwith=None):
    if chatwith:
        rname = chatwith
        if r.exists("pchat-" + rname + '-' + current_user.username) is False:
            r.zadd("pchat-" + rname + '-' + current_user.username, current_user.username, 1)
            r.zadd("pchat-" + rname + '-' + current_user.username, rname, 2)
...

当前函数可以接收一个 chatwith 参数,如果该参数不为 None 则在 redis 中创建 pchat 数据,即为私聊聊天室。

接下来创建私聊页面视图函数,这里在后面可以完善成需要某些权限才可以发起私聊

@main.route('/privatechat/', methods=['GET', 'POST'])
@login_required
def private_chat():
    # 后面可以增加私聊权限
    user_right = True
    if user_right:
        uname = request.args.get('to', "")
        create_room(chatwith=uname)
        ulist = r.zrange("pchat-" + uname + '-' + current_user.username, 0, -1)
        messages = r.zrange("pmsg-" + uname + '-' + current_user.username, 0, -1, withscores=True)
        msg_list = []
        for i in messages:
            msg_list.append([json.loads(i[0]), time.strftime("%Y/%m/%d %p%H:%M:%S", time.localtime(i[1]))])
        return render_template('privatechat.html', rname=uname, user_list=ulist, msg_list=msg_list)
    else:
        pass

下面还需要一个返回私聊列表的函数

# 获取个人私聊信息
@main.route('/api/pchat/<user>', methods=['GET', 'POST'])
def pchat_info(user):
    pchat = r.keys(pattern='pchat-*')
    pchatlist = []
    for i in pchat:
        i_str = str(i)
        user1 = i_str.split('-', 2)[1]
        if user in i_str:
            pchatlist.append({user1: i_str})
    html = []
    for i in pchatlist:
        html.append(f'<li class="fn-clear"><em id="{list(i.keys())[0]}" onclick="pchat(this.id)">{list(i.values())[0]}</em></li>')
    return json.dumps(html)

这里直接拼接了 HTML 代码并返回,之所以这么做是因为 JavaScript 代码能力过弱

,只好在 Python 侧做了。

在写这块代码时,我是深刻的体会到了 Vue 等前端框架的好处,不仅仅是快速搭建 UI,在处理数据等方面也是爽的一米,感兴趣的同学可以去看看我的 Flask + Vue 系列。

最后就是改造发送消息的函数 send_chat

...
        rtype = request.form.get("rtype", "")
        if rtype and rtype == 'p':
            ulist = r.zrange("pchat-" + rname + '-' + current_user.username, 0, -1)
            if current_user.username in ulist:
                body = {"username": current_user.username, "msg": info}
                r.zadd("pmsg-" + rname + '-' + current_user.username, json.dumps(body), time.time())
                socket_send(info, current_user.username)
                data = json.dumps({'code': 200, 'msg': info})
                return data
            else:
                data = json.dumps({'code': 403, 'msg': 'You are not in this room'})
                return data
...

前端需要在 URL 参数中传递 rtype 参数来标识该请求是私聊发出的,其他代码基本复用原来的。

前端改造

首先就是要定时刷新私聊列表

// 定时更新私聊列表
    setInterval(function() {
        $.get("http://127.0.0.1:8889/api/pchat/" + "{{ current_user.username }}",//GET请求的url地址
        function(data,status){
            var roomlist = JSON.parse(data);
            for (var i =0; i<roomlist.length; i++) {
                li_html += roomlist[i];
            }
            console.log(li_html);
            $("#pchat").html(li_html);//更新列表内容
          });
        }, 5000); //定时刷新界面(0.5秒)

这里有一些硬编码,请忽略

接下来就是发起私聊的入口了,这里我设置到了双击某个用户,即可发起私聊

// 用户列表操作
    var fromname = $('#fromname').val();
    var to_uid   = 0; // 默认为0,表示发送给所有用户
    var to_uname = '';
    $('.user_list > li').dblclick(function(){
        to_uname = $(this).find('em').text();
        to_uid   = $(this).attr('data-id');
        var redirect_url = 'http://' + document.domain + ':' + location.port + '/privatechat/?to=' + to_uname;
        if(to_uname == fromname){
            alert('您不能和自己聊天!');
            return false;
        }
        if(to_uname == '所有用户'){
            $("#toname").val('');
            $('#chat_type').text('群聊');
        }else{
            // 新开窗口私聊
            window.open(redirect_url);
        }
        $(this).addClass('selected').siblings().removeClass('selected');
    });

当然,用户也可以单击私聊列表来进入私聊聊天室,因为在后端返回时已经给 em 标签设置了 onclick 事件,这里直接实现事件函数即可

function pchat(id){
        var to_user = id;
        var redirect_url = 'http://' + document.domain + ':' + location.port + '/privatechat/?to=' + to_user;
        window.open(redirect_url);
    }

至此,基本改造完成,可以愉快的私聊喽!

私聊效果

最后阅读原文直达 GitHub 地址哦

本文分享自微信公众号 - 萝卜大杂烩(luobodazahui),作者:周萝卜

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python可视化Dash教程简译(一)

    “ 作为数据分析的重要一环,把得到的数据或者分析结果以图表的方式展示,是一种直观、优雅的方式。Dash是基于Flask的Python可视化工具,我在学习之余尝试...

    周萝卜
  • 从头搭建一个在线聊天室(四)

    由于我们需要定时清理 redis 中保存的聊天记录,那么就需要一个定时任务。flask 有一个完善的插件 flask-apscheduler,但是简单试用了下,...

    周萝卜
  • 从头搭建一个HTTPS网站

    “ 在这个信息爆炸的时代,信息安全更加重要,也更加受到重视。比如说,如果你想搭建一个供微信小程序服务的后台,那么接口就必须是https的,今天就一起来搭建一个h...

    周萝卜
  • 朋友你听说过尾递归吗

    我们以斐波那契数列为例子讲解了尾递归的运用方式,并对比了普通递归与尾递归的性能。

    IMWeb前端团队
  • 朋友你听说过尾递归吗

    简单的说,斐波那契数列中的每一项都是前两项的和。 即F(1)=1,F(2)=1, F(n)=F(n-1)+F(n-2)(n>2,n∈N*)

    IMWeb前端团队
  • Spring Batch(2)——Job配置与运行

    在 Spring Batch(1)——数据批处理概念 文中介绍了批处理的概念以及Spring Batch相关的使用场景,后续将会陆续说明在代码层面如何使用。

    随风溜达的向日葵
  • 还在做个人博客?记住这4个提示

    黄伟SEO
  • 菩提项目调研及评估

    菩提(Bodhi,代币BOT)是一个基于中国的全新的基于区块链的去中心化预测市场。

    凌帅出口
  • 周鸿祎全员信:360发起“百城战疫”活动​;谷歌合并Alp​habet旗下子公司Jigsaw|ITDaily

    据外媒报道,日前,谷歌合并了Alphabet旗下子公司Jigsaw。Jigsaw是一家技术孵化公司,负责创建技术工具来遏制线上的虚假信息、骚扰等问题。对此,谷歌...

    用户6543014
  • 【从零学习OpenCV 4】极坐标变换

    经过几个月的努力,小白终于完成了市面上第一本OpenCV 4入门书籍《从零学习OpenCV 4》。为了更让小伙伴更早的了解最新版的OpenCV 4,小白与出版社...

    小白学视觉

扫码关注云+社区

领取腾讯云代金券