First commit
This commit is contained in:
Andros
commit
d301933ba4
62
main.py
Normal file
62
main.py
Normal 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
43
models.py
Normal 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
7
requirements.txt
Normal 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
10070
static/css/bulma.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
static/css/main.css
Normal file
7
static/css/main.css
Normal 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
3
static/js/vendor/socket.io.slim.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
6
static/js/vendor/vue.min.js
vendored
Normal file
6
static/js/vendor/vue.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
87
templates/chat.html
Normal file
87
templates/chat.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user