基於flask的網頁聊天室（四）

前言

接前天的內容，今天完成了消息的處理

具體內容

上次使用了flask_login做用戶登錄，但是直接訪問login_requare裝飾的函數會報401錯誤，這里可以自定義login_requare攔截后的操作：

@login_manager.unauthorized_handler
def unauthorized():

    return redirect(url_for('auth.login'))

這樣會重定向到登錄頁面

然后建立了用戶的消息表：

class User(UserMixin,db.Model):

    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    email = db.Column(db.String(256),unique=True,nullable=False)
    username = db.Column(db.String(32),unique=True,nullable=False)
    password_hash = db.Column(db.String(128))
    avatar_url = db.Column(db.String(256))
    messages = db.relationship('Message',back_populates='author',cascade='all')

    def __init__(self,**kwargs):
        super(User,self).__init__(**kwargs)
        if self.email is not None and self.avatar_url is None:
            self.avatar_url = 'https://gravatar.com/avatar/'+hashlib.md5(self.email.encode('utf-8')).hexdigest()+'?d=identicon'

class Message(db.Model):
    id = db.Column(db.Integer,primary_key=True,autoincrement=True)
    content = db.Column(db.Text,nullable=False)
    create_time = db.Column(db.DateTime,default=datetime.utcnow,index=True)
    author_id = db.Column(db.Integer,db.ForeignKey('user.id'))
    author = db.relationship('User',back_populates='messages')

然后用bootstarp做了個消息的顯示以及發送的頁面，再自己隨便改吧改吧。

接下來就是怎樣做消息的發送以及接收了

這里使用websocket的方式，它可以使客戶端與服務端建立起全雙工的通信方式

客戶端使用socket.io.js,服務端使用flask-socketio擴展

於是首先要pip安裝flask-socketio

然后：

from flask_socketio import SocketIO
socketio = SocketIO(app, async_mode='eventlet')

socketio.run(app,host='0.0.0.0')

像上邊這樣把原來的app啟動改一下，eventlet是服務器，它支持websocket，必須要先pip安裝

然后具體處理消息，首先是消息的發送：

在前端

首先要引入socket.io.js，然后

function send() {
   //點擊發送按鈕
       $('#send_button').click(function () {
        var content = $('#text_area').val().trim();
        if (content==""){

        }else {
            socket.emit('new_message',content);
            $('#text_area').val("")
        }
       })
}

通過socket.emit，把消息發送到服務端new_message就是相當於這個事件的名稱，content作為參數傳遞

在服務端：

@socketio.on('new_message')
def new_message(content):
    print(content)
    message = models.Message(author=current_user._get_current_object(),content=clean_html(content))
    db.session.add(message)
    db.session.commit()
    emit('new_message',{'message_html':render_template('message.html',message=message)},broadcast=True)

用裝飾器socketio.on(‘new_message’)裝飾的函數就是new_message的事件處理，這里把它存入表中，並返回一個消息的html字符串，傳入message對象渲染，broadcast=True表示廣播，意思是所有與服務端建立websocket鏈接的都能收到該消息

接下來是客戶端消息的顯示：

function get() {
    socket.on('new_message',function (data) {
        $('#message_container').append(data.message_html);
        scrollToEnd();

    })
}

這里同樣用socket.on方法接受客戶端返回的信息，並把它添加到顯示區域，並把滾輪滾到底部。

除此之外，每次訪問瀏覽器頁面我默認設置的是顯示歷史10條消息，之后可能會添加歷史消息刷新

@chat.route('/chat', methods=['GET', "POST"],endpoint='chat')
@login_required
def chatroom():
    if request.method == 'GET':
        message_list = db.session.query(models.Message).order_by(models.Message.id).all()
        message_list.reverse()
        message_list = message_list[:9]
        message_list.reverse()
        return render_template('chatroom.html',message_list=message_list)

到這里，基本的內容就算完成了，下面是一個效果圖，是我用手機和電腦交互的：

總結

聊天室的內容基本完成，最初目標已經達到，代碼放在了github上，如果之后有空還會再完善或添加功能

​