Привет. В этом посте вы узнаете, как создать простой веб -чат с помощью Python и Web Sockets. Поскольку это так, вам нужно будет иметь Python установлен на вашем компьютере.
Этот исходный код проекта доступен на этом GitHub Repository И вы можете увидеть его онлайн по адресу Папо рето Анкет
Если у вас нет колба Пакет, вы можете установить его со следующей командой: PIP установить колбу Анкет Вам также понадобится flask_socketio и событие , так что вы можете бежать пип установить flask_socketio и PIP установить событие Чтобы установить их.
Теперь, когда у вас все установлено, так будут выглядеть файлы и каталоги нашего проекта:
templates
- index.html
static
css
- style.css
- main.py
Ядром нашего проекта является main.py Файл, это то, что будет контролировать наше приложение. Это будет выглядеть так:
#! -*- enconding: utf-8 -*-
from flask import Flask, render_template
from flask_socketio import SocketIO, emit
app = Flask(__name__, template_folder='templates', static_folder='static', static_url_path='/static/')
socketio = SocketIO(app)
@app.route('/')
def index():
return render_template('index.html')
@socketio.on('client_message')
def receive_message (client_msg):
emit('server_message', client_msg, broadcast=True)
if __name__ == '__main__':
socketio.run(app)
Первые две строки кода импортируют пакеты и модули, которые мы собираемся использовать в этом проекте.
from flask import Flask, render_template from flask_socketio import SocketIO, emit
Колба наша веб -структура, и flask_socketio это пакет, который позволяет колба Чтобы использовать полнодуплексные протоколы связи с низкой задержкой, такие как веб-токеты.
Затем мы создаем создание наше приложение Flask и определяем, где будут шаблоны и статические файлы. Мы также создаем создание нашего объекта сокета и передаем приложение Flask в качестве аргумента.
app = Flask(__name__, template_folder='templates', static_folder='static', static_url_path='/static/') socketio = SocketIO(app)
Теперь мы определяем наш маршрут по умолчанию, который вернет index.html страница:
@app.route('/')
def index():
return render_template('index.html')
Когда пользователь отправит сообщение, оно испускает событие client_message на сервер, передавая прозвище и сообщение в виде параметров. Затем сервер будет транслировать это сообщение каждому подключенному пользователю:
@socketio.on('client_message')
def receive_message (client_msg):
emit('server_message', client_msg, broadcast=True)
Наконец, мы начнем запускать наше приложение со следующими строками:
if __name__ == '__main__':
socketio.run(app)
Вот и все, наш main.py Файл теперь завершен, и это доставит нас к index.html файл. В этом случае он будет иметь 3 основных частях: Сообщение BOX , входной короб и Прозвище-бокс Анкет Содержание этого файла будет:
Papo Reto Papo Reto
Мы используем Сокета API клиента, чтобы подключиться и позаботиться о обработке веб -копье. Итак, в этом случае мы используем CDN для этого:
Теперь, с JavaScript, нам нужно определить наш объект сокета, который будет подключаться к серверу:
const socket = io();
Поскольку WebSocket находится на том же маршруте, нам не нужно проходить что -либо в качестве параметров.
Когда пользователь нажимает на кнопку «Отправить», он позвонит Отправить сообщение функция Но если пользователь набирает что -то на вводе с входной короб ID, это позвонит Ispressingenter Функция, которая проверит, нажат ли пользователь Enter. Если это так, это также позвонит sendmessage () :
function isPressingEnter(e){
let k;
if(window.event){
k = e.keyCode;
if(k===13){
sendMessage();
}
}else if(e.which){
k = e.which;
if(k===13){
sendMessage();
}
}
}
Sendmessage Функция затем испускает A client_message Событие на сервер, передавая прозвище и сообщение в качестве данных:
function sendMessage(){
socket.emit('client_message', {'nickname': htmlEntities(document.getElementById('nickname-input').value), 'message': htmlEntities(document.getElementById('message-input').value)});
document.getElementById('message-input').value = '';
}
Мы также используем htmlentity Функция для удаления HTML -тегов с входов:
function htmlEntities(str) {
return String(str).replace(/&/g, '&').replace(//g, '>').replace(/"/g, '"');
}
Когда сервер получает сообщение, он будет транслировать сообщение всем, излучая Сообщение сервера мероприятие. Поэтому нам нужно добавить это сообщение в Сообщение BOX Когда server_message Событие получено:
socket.on('server_message', (data) => {
let e = document.createElement('p');
let sp = document.createElement('span');
sp.innerHTML = data.nickname;
e.appendChild(sp);
e.innerHTML = e.innerHTML+'>> '+data.message;
if(document.getElementById('message-box').children.length>20){
document.getElementById('message-box').removeChild(document.getElementById('message-box').children[0]);
}
document.getElementById('message-box').appendChild(e);
document.getElementById('message-box').scroll(0, document.getElementById('message-box').scrollHeight);
});
Если вы сейчас, запустите сервер с Python main.py , вы увидите, что наш Webchat уже работает.
Но так как это выглядит ужасно, мы добавим в это несколько CSS. Шаблоны колбы используют Джинджа Как его шаблонный двигатель, поэтому он немного отличается от добавления нашего пути файла CSS к индекс страница. Мы можем сделать это, добавив следующие строки кода внутри глава ярлык:
Вы можете сделать так, как хотите, но в этом случае это содержимое нашего файла CSS:
*{
margin: 0;
padding: 0;
}
body{
background: #202020;
color: #eee;
font-family: 'monospace';
line-height: 1.4em;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
padding: 15px;
}
#title{
font-size: calc(20px + 2vw + 1vh);
padding: 40px;
}
#chat-box{
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 3px 4px 4px #111;
}
@media only screen and (max-width: 600px){
#chat-box{
width: 95vw;
}
}
@media only screen and (min-width: 600px){
#chat-box{
width: 80vw;
}
}
#message-box{
width: 100%;
height: 60vh;
background: #444;
overflow-y: scroll;
padding: 5px;
font-size: calc(10px + 1vh + 2vw);
}
#message-box p{
width: 100%;
line-height: 1.5em;
overflow-wrap: break-word;
padding: 5px 2px;
margin: 2px 0;
background: #4f4f4f;
}
#message-box span{
color: yellow;
font-weight: 900;
}
#input-box{
width: 100%;
height: 100%;
display: grid;
grid-template-columns: 90% 10%;
}
#message-input{
height: 90%;
font-size: calc(10px + 1vh + 2vw);
border-radius: 0 0 0 6px;
}
#send-button{
background: purple;
color: #f0f0a0;
height: 100%;
font-size: calc(10px + 1vh);
font-weight: 900;
}
#nickname-box{
padding: 15px;
}
#nickname-input {
border-radius: 5px;
background: purple;
color: white;
padding: 2px;
font-size: calc(10px + 1vh + 1vw);
}
#nickname-label{
font-size: calc(10px + 1vh + 1vw);
}
И теперь это результат:
Спасибо за Ваше внимание! Это один из способов построить действительно простой webchat с помощью Python. Кроме того, это довольно легко сделать, но если вы, ребята, хотите, я также могу показать, как развернуть его в Heroku. Таким образом, вы можете позволить ему работать в Интернете.
Оригинал: “https://dev.to/raymag/building-a-simple-webchat-2504”