Python怎么實(shí)現(xiàn)在線聊天室私聊

本篇內(nèi)容主要講解“Python怎么實(shí)現(xiàn)在線聊天室私聊”，感興趣的朋友不妨來看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Python怎么實(shí)現(xiàn)在線聊天室私聊”吧!

實(shí)現(xiàn)思路

對(duì)于私聊，我覺得應(yīng)該有如下兩點(diǎn)需要實(shí)現(xiàn)

• 私聊列表更新
  每個(gè)人都需要有一個(gè)私聊的列表，并且需要準(zhǔn)實(shí)時(shí)的更新，這樣這個(gè)人才能知道當(dāng)前誰準(zhǔn)備和自己私聊，以及自己正在私聊的人。

• 私聊聊天室
  對(duì)于私聊的聊天室，其實(shí)可以復(fù)用群聊的聊天室實(shí)現(xiàn)，只不過這個(gè)聊天室里只有兩個(gè)人而已。同時(shí)對(duì)于消息的傳遞，同樣可以復(fù)用群聊中實(shí)現(xiàn)的功能。

前端布局

那么既然思路有了，首先就開始布局。這一點(diǎn)對(duì)于一個(gè)半殘前端來說，太楠楠楠了，搞了好久了，只整出這么個(gè)布局，略丑，但是也沒辦法了。

對(duì)于不會(huì)調(diào)樣式的我來說，這能對(duì)原有的 CSS 代碼做些簡(jiǎn)單的修改了

在原來所有用戶列表旁增加一個(gè)私聊

<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>暫時(shí)沒有任何私聊</em></li>
 </ul>
 </div>

然后再通過調(diào)整控件的寬度，來使得新增的 div 顯示在聊天框旁邊，而不是在下邊

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

好了，頁面布局就說這么多，說多了都是淚。

私聊聊天室

現(xiàn)在開始編寫后端邏輯，首先我們要先有一個(gè)私聊的聊天室，那么先來改造下 create_room 函數(shù)，創(chuàng)建私聊

@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)
...

當(dāng)前函數(shù)可以接收一個(gè) chatwith 的參數(shù)，如果該參數(shù)不為 None 則在 redis 中創(chuàng)建 pchat 數(shù)據(jù)，即為私聊聊天室。

接下來創(chuàng)建私聊頁面視圖函數(shù)，這里在后面可以完善成需要某些權(quán)限才可以發(fā)起私聊

@main.route('/privatechat/', methods=['GET', 'POST'])
@login_required
def private_chat():
 # 后面可以增加私聊權(quán)限
 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

下面還需要一個(gè)返回私聊列表的函數(shù)

# 獲取個(gè)人私聊信息
@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 代碼并返回，之所以這么做是因?yàn)?JavaScript 代碼能力過弱，在 Python 側(cè)做了。

在寫這塊代碼時(shí)，我是深刻的體會(huì)到了 Vue 等前端框架的好處，不僅僅是快速搭建 UI，在處理數(shù)據(jù)等方面也是爽的一米。

最后就是改造發(fā)送消息的函數(shù) 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 參數(shù)中傳遞 rtype 參數(shù)來標(biāo)識(shí)該請(qǐng)求是私聊發(fā)出的，其他代碼基本復(fù)用原來的。

前端改造

首先就是要定時(shí)刷新私聊列表

// 定時(shí)更新私聊列表
 setInterval(function() {
 $.get("http://127.0.0.1:8889/api/pchat/" + "{{ current_user.username }}",//GET請(qǐng)求的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);//更新列表內(nèi)容
 });
 }, 5000); //定時(shí)刷新界面（0.5秒）

這里有一些硬編碼，請(qǐng)忽略

接下來就是發(fā)起私聊的入口了，這里我設(shè)置到了雙擊某個(gè)用戶，即可發(fā)起私聊

// 用戶列表操作
	var fromname = $('#fromname').val();
	var to_uid = 0; // 默認(rèn)為0,表示發(fā)送給所有用戶
	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');
	});

當(dāng)然，用戶也可以單擊私聊列表來進(jìn)入私聊聊天室，因?yàn)樵诤蠖朔祷貢r(shí)已經(jīng)給 em 標(biāo)簽設(shè)置了 onclick 事件，這里直接實(shí)現(xiàn)事件函數(shù)即可

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

這樣，基本改造完成，可以愉快的私聊嘍！

私聊效果

到此，相信大家對(duì)“Python怎么實(shí)現(xiàn)在線聊天室私聊”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！