andros/flask-chat-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Andros 2017-11-03 11:52:17 +01:00
commit d301933ba4
8 changed files with 10285 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
main.py Normal file
View File

@ -0,0 +1,62 @@
from os import environ
from dotenv import load_dotenv, find_dotenv
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
from models import db, Chat
load_dotenv(find_dotenv())
app = Flask(__name__)
# Config
app.config['SECRET_KEY'] = environ.get('SECRET_KEY')
if environ.get('DEBUG') == 'True':
app.config['DEBUG'] = True
else:
app.config['DEBUG'] = False
app.config['PORT'] = 80
# Socketio
DOMAIN = environ.get('DOMAIN')
socketio = SocketIO(app)
# Database
app.config['SQLALCHEMY_DATABASE_URI'] = environ.get('DATABASE')
db.init_app(app)
@app.route('/<int:channel>/<name>/')
def open_chat(channel, name):
my_chat = Chat.query.filter_by(channel=channel).all()
return render_template(
'chat.html',
domain=DOMAIN,
chat=my_chat,
channel=channel,
username=name
)
@socketio.on('new_message')
def new_message(message):
# Send message to alls users
emit('new_message', {
'username': message['username'],
'text': message['text']
},
broadcast=True
)
# Save message
my_new_chat = Chat(
username=message['username'],
text=message['text'],
channel=message['channel']
)
db.session.add(my_new_chat)
try:
db.session.commit()
except:
db.session.rollback()
if __name__ == '__main__':
socketio.run(app)

43
models.py Normal file
View File

@ -0,0 +1,43 @@
# -*- coding: utf-8 -*-
# Librarys
from flask import Flask
from datetime import datetime
from flask_sqlalchemy import SQLAlchemy
from flask_script import Manager
from flask_migrate import Migrate, MigrateCommand
from os import environ
from dotenv import load_dotenv, find_dotenv
load_dotenv(find_dotenv())
app = Flask(__name__)
# Settings
app.config['SQLALCHEMY_DATABASE_URI'] = environ.get('DATABASE')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
# Variables
db = SQLAlchemy(app)
migrate = Migrate(app, db)
manager = Manager(app)
manager.add_command('db', MigrateCommand)
class Chat(db.Model):
'''
Table chat
'''
__tablename__ = 'chat'
id = db.Column(db.Integer, primary_key=True)
username = db.Column(db.String(128))
text = db.Column(db.Text)
channel = db.Column(db.Integer)
created_at = db.Column(
db.DateTime, nullable=False, default=datetime.utcnow)
def __repr__(self):
return '<Chat {0}>'.format(self.username)
if __name__ == "__main__":
manager.run()

7
requirements.txt Normal file
View File

@ -0,0 +1,7 @@
Flask==0.12.2
Flask-Migrate==2.1.1
Flask-Script==2.0.6
Flask-SocketIO==2.9.2
Flask-SQLAlchemy==2.3.2
python-dotenv==0.7.1
python-socketio==1.8.1

10070
static/css/bulma.css vendored Normal file
View File

File diff suppressed because it is too large Load Diff

7
static/css/main.css Normal file
View File

@ -0,0 +1,7 @@
section.new-message {
position: fixed;
bottom: 1rem;
left: 0;
right: 0;
z-index: 100;
}

3
static/js/vendor/socket.io.slim.js generated vendored Normal file
View File

File diff suppressed because one or more lines are too long

6
static/js/vendor/vue.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

87
templates/chat.html Normal file
View File

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="{{ url_for('static', filename='css/bulma.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<div id="app" class="container">
<section class="messages">
<div v-for="message in messages" class="box">
<article class="media">
<div class="media-content">
<div class="content">
<p><strong>@[[ message.username ]]</strong></p>
<p>[[ message.text ]]</p>
</div>
</div>
</article>
</div>
</section>
<section class="new-message">
<div class="field has-addons">
<div class="control is-expanded">
<input v-model="newMessage" @keypress.enter="sendMessage" class="input" type="text" placeholder="Escribe un mensaje...">
</div>
<div class="control">
<button @click="sendMessage" class="button is-info">Enviar</button>
</div>
</div>
</section>
</div>
<script src="{{ url_for('static', filename='js/vendor/socket.io.slim.js') }}"></script>
<script src="{{ url_for('static', filename='js/vendor/vue.min.js') }}"></script>
<script>
var socket = io.connect('{{ domain }}');
var app = new Vue({
el: "#app",
delimiters: ['[[', ']]'],
data: {
channel: {{ channel }},
username: '{{ username }}',
messages: [
{% for message in chat %}
{
username: '{{ message.username }}',
text: '{{ message.text }}'
}{% if not loop.last %},{% endif %}
{% endfor %}
],
newMessage: ''
},
methods: {
sendMessage: () => {
// Send new message
socket.emit('new_message', {
channel: app.channel,
username: app.username,
text: app.newMessage
});
// Clear text
app.$set(app, 'newMessage', '');
}
}
});
socket.on('connect', function() {
console.log('Connect')
});
socket.on('new_message', function(msg) {
// Add new message to HTML
let my_messages = app.messages;
my_messages.push({
username: msg.username,
text: msg.text
})
app.$set(app, 'messages', my_messages);
});
</script>
</body>
</html>