基于flask的网页聊天室(四)

具体内容
上次使用了flask_login做用户登录,但是直接访问login_requare装饰的函数会报401错误,这里可以自定义login_requare拦截后的操作:

@login_manager.unauthorized_handler
def unauthorized():

return redirect(url_for(‘auth.login‘))
这样会重定向到登录页面

然后建立了用户的消息表:

‘‘‘
想要学习Python?Python学习交流群:1004391443满足你的需求,资料都已经上传群文件,可以自行下载!
‘‘‘
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(http://www.my516.com)
message_list = message_list[:9]
message_list.reverse()
return render_template(‘chatroom.html‘,message_list=message_list)
到这里,基本的内容就算完成了,下面是一个效果图,是我用手机和电脑交互的:
---------------------
作者:娇兮心有之

原文地址:https://www.cnblogs.com/hyhy904/p/10995898.html

时间: 2024-10-29 11:51:31

基于flask的网页聊天室(四)的相关文章

基于flask的网页聊天室(二)

基于flask的网页聊天室(二) 前言 接上一次的内容继续完善,今天完成的内容不是很多,只是简单的用户注册登录,内容具体如下 具体内容 这次要加入与数据哭交互的操作,所以首先要建立相关表结构,这里使用flask-sqlalchemy来辅助创建 首先修改之前的init文件为: from flask import Flask from flask_sqlalchemy import SQLAlchemy db = SQLAlchemy() from web_chatroom.models impor

网页聊天室制作步骤分享

结合网页与Asp来实现一个简单的网页聊天室制作案例,有在线聊天.在线人员名单.在线时间等功能.在这篇教程的最后,还比较详细地介绍了Flash与Asp结合使用的平台环境和常用的调试手段. 一.原理 主要的流程是先在网页端发送一个请求到服务器端,然后等待从服务器端的返回值,当值返回网页端后,根据相应的值做相应的操作.在网页部 分,跟前面的教程一样,用到的主要都是loadVariables()函数和循环等待的技巧.在Asp部分,主要用到了global.asa文件和 application()属性,先定

Java和WebSocket开发网页聊天室

小编心语:咳咳咳,今天又是聊天室,到现在为止小编已经分享了不下两个了,这一次跟之前的又不大相同,这一次是网页聊天室,具体怎么着,还请各位看官往下看~ Java和WebSocket开发网页聊天室 一.项目简介 WebSocket是HTML5一种新的协议,它实现了浏览器与服务器全双工通信,这里就将使用WebSocket来开发网页聊天室,前端框架会使用AmazeUI,后台使用Java,编辑器使用UMEditor. 二.涉及知识点 网页前端(HTML+CSS+JS)和Java 三.软件环境 Tomcat

html5 websocket + node.js 实现网页聊天室

1 client:    socket.io server:   node.js +  express  + socket.io 一个简单的聊天室  demo,没有注册,内置了一些测试用户 2 client 关键代码 var socket = io.connect('http://localhost:8080'); socket.on('connect',function(){ console.log('connected to server'); socket.on('login succes

使用WebSocket实现网页聊天室

知道WebSocket挺久了,但是一直没提起兴趣去了解它. 今天听@成熟的毛毛虫 说到slack.小小的试用了一下,发现slack的聊天功能做得相当强大,看了下网络请求,发现是基于WebSocket实现的.顿时提起兴趣,想了解下这强大的WebSocket. 先了解下WebSocket. 开源中国的介绍:http://www.oschina.net/p/websocket 百度百科的介绍:http://baike.baidu.com/link?url=yMTBVobtkp1E1a0wrRJlnEX

WebSocket 网页聊天室的实现(服务器端:.net + windows服务,前端:Html5)

websocket是HTML5中的比较有特色一块,它使得以往在客户端软件中常用的socket在web程序中也能轻松的使用,较大的提高了效率.废话不多说,直接进入题. 网页聊天室包括2个部分,后端服务器+前端页面. 1.后端服务部分:.net4.0 + windows服务.相比寄宿在iis中,寄宿在进程中的windows服务更加的稳定可靠(文章中的例子用windows控制台程序演示,后面给出完整的windows服务的代码). 2.前端部分:html5 + jQuery + bootstrap.基本

基于Socket的Android聊天室

1        基于Socket的Android聊天室 Socket通信是网络通信中最常用的技术之一,通过Socket建立的可靠连接,可以让多个终端与服务器保持通信,最典型的应用是建立一个多人聊天程序.本实例使用ServerSocket建立聊天服务器.将服务器端所有的通讯线程保存到一个集合当中,当有用户发来数据,则转发给所有用户,实现聊天室效果.Android端通过使用Socket建立客户端链接,并且在AsyncTask中执行网络读写的任务,将用户输入的内容发送到服务器,并接收服务器发来的数据

Flask基于websocket的简单聊天室

1.安装gevent-websocket pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ gevent-websocket 2.chat.py文件内容如下: from flask import Flask,request,render_template import json from geventwebsocket.handler import WebSocketHandler from gevent.pywsgi import

nodejs 基于socket.io实现聊天室

由于之后要做的网页视频直播项目要用到socket.io模块,所以特地花时间研究了下,参照网上的代码做了些改进,自己写了个聊天室代码.不得不承认后端事实推送能力有点厉害,这是以前我用php一直苦恼的事情.下面简单介绍下我的项目,顺带讲解下nodejs. 事实上,在看别人写的代码之前,我一直不知道nodejs是干嘛的,直到真正接触到才明白这也可以算作是服务端代码,丰富的第三方库使其功能极其强大.它可以像golang的beego一样直接通过命令行开启服务器,不过要用到express模块.加载模块的方式