Chat Room Html
💣 👉🏻👉🏻👉🏻 ALL INFORMATION CLICK HERE 👈🏻👈🏻👈🏻
Chat Room Html
Этот урок продолжает урок 1. Мы заставим страницу комнаты работать так, чтобы вы могли общаться с собой и другими людьми в одной комнате.
Теперь мы создадим второе отображение: комнаты, которое позволяет вам видеть сообщения, опубликованные в определенной комнате чата.
Создайте новый файл chat/templates/chat/room.html. Ваша директория приложения теперь должна выглядеть так:
chat/
__init__.py
templates/
chat/
index.html
room.html
urls.py
views.py
Создайте шаблон представления для комнаты в chat/templates/chat/room.html:
Chat Room
var roomName = "{{ room_name|escapejs }}";
var chatSocket = new WebSocket(
'ws://' + window.location.host +
'/ws/chat/' + roomName + '/');
chatSocket.onmessage = function(e) {
var data = JSON.parse(e.data);
var message = data['message'];
document.querySelector('#chat-log').value += (message + '\n');
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.keyCode === 13) { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
var messageInputDom = document.querySelector('#chat-message-input');
var message = messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
};
Создайте функцию просмотра комнаты в chat/views.py:
# chat/views.py
from django.shortcuts import render
def index(request):
return render(request, 'chat/index.html', {})
def room(request, room_name):
return render(request, 'chat/room.html', {
'room_name': room_name
})
Создайте маршрут для функции комнаты в chat/urls.py:
# chat/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('', views.index, name='index'),
path('/', views.room, name='room'),
]
Запустите сервер разработки Channels:
Перейдите на http://127.0.0.1:8000/chat/ в своем браузере и увидите главную страницу.
Введите «lobby» в качестве названия комнаты и нажмите клавишу ввода. Вы будете перенаправлены на страницу комнаты по адресу http://127.0.0.1:8000/chat/lobby/, на которой теперь отображается пустой журнал чата.
Введите сообщение «hello» и нажмите клавишу ввода. Ничего не произошло. В частности, сообщение не появляется в журнале чата. Почему?
Представление комнаты пытается открыть WebSocket по URL-адресу ws://127.0.0.1:8000/ws/chat/lobby/, но мы еще не создали потребителя, который принимает соединения WebSocket. Если вы откроете консоль JavaScript вашего браузера, вы должны увидеть ошибку, которая выглядит следующим образом:
WebSocket connection to 'ws://127.0.0.1:8000/ws/chat/lobby/' failed: Unexpected response code: 500
Когда Django принимает запрос HTTP, он обращается к корневому URLconf для поиска функции представления, а затем вызывает функцию представления для обработки запроса. Точно так же, когда Channels принимает соединение WebSocket, он проверяет конфигурацию корневой маршрутизации для поиска потребителя, а затем вызывает различные функции потребителя для обработки событий из соединения.
Мы напишем базового потребителя, который принимает соединения WebSocket по пути /ws/chat/ROOM_NAME/, который принимает любое сообщение, полученное в WebSocket, и отправляет его обратно в тот же WebSocket.
Хорошей практикой является использование префикса общего пути, такого как /ws/, чтобы отличать соединения WebSocket от обычных соединений HTTP, потому что это облегчит развертывание каналов в производственной среде в определенных конфигурациях.
В частности, для больших сайтов можно будет настроить HTTP-сервер промышленного уровня, такой как nginx, для маршрутизации запросов на основе пути либо к (1) серверу WSGI промышленного уровня, например Gunicorn+Django, для обычных HTTP-запросов, либо (2) к производственному серверу ASGI, например, Daphne+Channels для запросов WebSocket.
Обратите внимание, что для небольших сайтов вы можете использовать более простую стратегию развертывания, где Daphne обслуживает все запросы - HTTP и WebSocket - вместо того, чтобы иметь отдельный сервер WSGI. В этой конфигурации развертывания не требуется общий префикс пути, такой как /ws/.
Создайте новый файл chat/consumer.py. Ваша директория приложения теперь должна выглядеть так:
chat/
__init__.py
consumers.py
templates/
chat/
index.html
room.html
urls.py
views.py
Поместите следующий код в chat/consumer.py:
# chat/consumers.py
from channels.generic.websocket import WebsocketConsumer
import json
class ChatConsumer(WebsocketConsumer):
def connect(self):
self.accept()
def disconnect(self, close_code):
pass
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
self.send(text_data=json.dumps({
'message': message
}))
Это синхронный потребитель WebSocket, который принимает все соединения, получает сообщения от своего клиента и отправляет эти сообщения обратно тому же клиенту. На данный момент он не передает сообщения другим клиентам в той же комнате.
Channels также поддерживают запись асинхронных потребителей для повышения производительности. Однако любой асинхронный потребитель должен быть осторожен, чтобы избежать непосредственного выполнения операций блокировки, таких как доступ к модели Django. Для получения дополнительной информации о написании асинхронных потребителей смотрите Потребители (Consumers).
Нам нужно создать конфигурацию маршрутизации для приложения chat, которое имеет маршрут к потребителю. Создайте новый файл chat/routing.py. Ваша директория приложения теперь должна выглядеть так:
chat/
__init__.py
consumers.py
routing.py
templates/
chat/
index.html
room.html
urls.py
views.py
Поместите следующий код в chat/routing.py:
# chat/routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r'ws/chat/(?P\w+)/$', consumers.ChatConsumer),
]
Следующим шагом является указание конфигурации корневой маршрутизации в модуле chat.routing. В mysite/routing.py импортируйте AuthMiddlewareStack, URLRouter и chat.routing и вставьте ключ 'websocket' в список ProtocolTypeRouter в следующем формате:
# mysite/routing.py
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing
application = ProtocolTypeRouter({
# (http->django views is added by default)
'websocket': AuthMiddlewareStack(
URLRouter(
chat.routing.websocket_urlpatterns
)
),
})
Эта корневая конфигурация указывает, что при установлении соединения с сервером разработки Channels ProtocolTypeRouter сначала проверяет тип соединения. Если это соединение WebSocket (ws:// или wss://), соединение будет передано AuthMiddlewareStack.
AuthMiddlewareStack будет заполнять область действия ссылкой на текущего пользователя, прошедшего проверку подлинности, аналогично тому, как AuthenticationMiddleware Django заполняет объект request функции представления у текущего пользователя, прошедшего проверку подлинности (области будут обсуждаться позже в этом руководстве). Затем соединение будет передано в URLRouter.
URLRouter проверит HTTP-путь соединения, чтобы направить его конкретному потребителю, на основе предоставленных шаблонов url.
Давайте проверим, что потребитель для пути /ws/chat/ROOM_NAME/ работает. Запустите миграции, чтобы применить изменения в базе данных (для инфраструктуры сессий Django требуется база данных), а затем запустите сервер разработки Channels:
$ python manage.py migrate
Operations to perform:
Apply all migrations: admin, auth, contenttypes, sessions
Running migrations:
Applying contenttypes.0001_initial... OK
Applying auth.0001_initial... OK
Applying admin.0001_initial... OK
Applying admin.0002_logentry_remove_auto_add... OK
Applying contenttypes.0002_remove_content_type_name... OK
Applying auth.0002_alter_permission_name_max_length... OK
Applying auth.0003_alter_user_email_max_length... OK
Applying auth.0004_alter_user_username_opts... OK
Applying auth.0005_alter_user_last_login_null... OK
Applying auth.0006_require_contenttypes_0002... OK
Applying auth.0007_alter_validators_add_error_messages... OK
Applying auth.0008_alter_user_username_max_length... OK
Applying auth.0009_alter_user_last_name_max_length... OK
Applying sessions.0001_initial... OK
$ python3 manage.py runserver
Перейдите на страницу комнаты по адресу http://127.0.0.1:8000/chat/lobby/, где теперь отображается пустой журнал чата.
Введите сообщение «hello» и нажмите клавишу ввода. Теперь вы должны увидеть «hello», отраженный в журнале чата.
Однако если вы откроете вторую вкладку браузера на той же странице комнаты по адресу http://127.0.0.1:8000/chat/lobby/ и введете сообщение, сообщение не появится на первой вкладке. Чтобы это работало, нам нужно иметь несколько экземпляров одного и того же ChatConsumer, чтобы иметь возможность общаться друг с другом. Каналы обеспечивают абстракцию канального уровня, которая обеспечивает такой вид связи между потребителями.
Перейдите в терминал, где вы выполнили команду runserver и нажмите Control-C, чтобы остановить сервер.
Канальный уровень - это своего рода система связи. Это позволяет нескольким пользовательским экземплярам общаться друг с другом и с другими частями Django.
Канальный уровень предоставляет следующие абстракции:
Канал - это почтовый ящик, куда можно отправлять сообщения. У каждого канала есть имя. Любой, у кого есть название канала, может отправить сообщение на канал.
Группа - это группа связанных каналов. У группы есть имя. Любой, у кого есть имя группы, может добавить/удалить канал в группе по имени и отправить сообщение всем каналам в группе. Невозможно перечислить, какие каналы находятся в определенной группе.
Каждый потребительский экземпляр имеет автоматически сгенерированное уникальное имя канала, поэтому с ним можно связаться через уровень канала.
В нашем приложении чата мы хотим, чтобы несколько экземпляров ChatConsumer общались друг с другом в одной комнате. Для этого каждый ChatConsumer добавит свой канал в группу, имя которой основано на названии комнаты. Это позволит ChatConsumers передавать сообщения всем остальным ChatConsumers в той же комнате.
Мы будем использовать канальный слой, который использует Redis в качестве резервного хранилища. Чтобы запустить сервер Redis через порт 6379, выполните следующую команду:
$ docker run -p 6379:6379 -d redis:2.8
Нам нужно установить channel_redis, чтобы Channels знал, как взаимодействовать с Redis. Запустите следующую команду:
Прежде чем мы сможем использовать канальный слой, мы должны его настроить. Отредактируйте файл mysite/settings.py и добавьте параметр CHANNEL_LAYERS внизу. Это должно выглядеть так:
# mysite/settings.py
# Channels
ASGI_APPLICATION = 'mysite.routing.application'
CHANNEL_LAYERS = {
'default': {
'BACKEND': 'channels_redis.core.RedisChannelLayer',
'CONFIG': {
"hosts": [('127.0.0.1', 6379)],
},
},
}
Можно настроить несколько слоев канала. Однако большинство проектов будет использовать только один канальный слой — 'default'.
Давайте удостоверимся, что канальный слой может общаться с Redis. Откройте оболочку Django и выполните следующие команды:
$ python3 manage.py shell
>>> import channels.layers
>>> channel_layer = channels.layers.get_channel_layer()
>>> from asgiref.sync import async_to_sync
>>> async_to_sync(channel_layer.send)('test_channel', {'type': 'hello'})
>>> async_to_sync(channel_layer.receive)('test_channel')
{'type': 'hello'}
Введите Control-D, чтобы выйти из оболочки Django.
Теперь, когда у нас есть канальный слой, давайте использовать его в `` ChatConsumer``. Поместите следующий код в chat/consumer.py, заменив старый код:
# chat/consumers.py
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
import json
class ChatConsumer(WebsocketConsumer):
def connect(self):
self.room_name = self.scope['url_route']['kwargs']['room_name']
self.room_group_name = 'chat_%s' % self.room_name
# Join room group
async_to_sync(self.channel_layer.group_add)(
self.room_group_name,
self.channel_name
)
self.accept()
def disconnect(self, close_code):
# Leave room group
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
# Receive message from WebSocket
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json['message']
# Send message to room group
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type': 'chat_message',
'message': message
}
)
# Receive message from room group
def chat_message(self, event):
message = event['message']
# Send message to WebSocket
self.send(text_data=json.dumps({
'message': message
}))
Когда пользователь отправляет сообщение, функция JavaScript передает сообщение через WebSocket в ChatConsumer. ChatConsumer получит это сообщение и отправит его группе, соответствующей названию комнаты. Каждый ChatConsumer в той же группе (и, следовательно, в той же комнате) получит сообщение от группы и перенаправит его через WebSocket обратно в JavaScript, где оно будет добавлено в журнал чата.
Несколько частей нового кода ChatConsumer заслуживают дальнейшего объяснения:
Получает параметр 'room_name' из URL-маршрута в chat/routing.py, который открывает соединение WebSocket с потребителем.
У каждого потребителя есть область видимости, которая содержит информацию о его соединении, включая, в частности, любые позиционные или ключевые аргументы из URL-маршрута и текущего аутентифицированного пользователя, если таковой имеется.
Создает имя группы каналов непосредственно из указанного пользователем номера комнаты, без кавычек или экранирования.
Имена групп могут содержать только буквы, цифры, дефисы и точки. Поэтому этот пример кода не будет работать с именами комнат, которые имеют другие символы.
Декоратор async_to_sync(…) требуется, потому что ChatConsumer является синхронным WebsocketConsumer, но он вызывает метод асинхронного канального уровня. (Все методы канального уровня являются асинхронными.)
Имена групп ограничены только буквенно-цифровыми символами ASCII, дефисами и точками. Поскольку этот код создает имя группы непосредственно из имени комнаты, произойдет сбой, если имя комнаты содержит какие-либо символы, которые недопустимы в имени группы.
Если вы не вызовете accept() в методе connect(), соединение будет отклонено и закрыто. Возможно, вы захотите отклонить соединение, например, потому что запрашивающий пользователь не авторизован для выполнения запрошенного действия.
Рекомендуется, чтобы accept() был вызван как последнее действие в connect(), если вы решите принять соединение.
У события есть специальный ключ 'type', соответствующий имени метода, который должен вызываться у потребителей, которые получают событие.
Давайте проверим, что новый потребитель для пути /ws/chat/ROOM_NAME/ работает. Чтобы запустить сервер разработки каналов, выполните следующую команду:
Откройте вкладку браузера на странице комнаты по адресу http://127.0.0.1:8000/chat/lobby/. Откройте вторую вкладку браузера на той же странице комнаты.
Во второй вкладке браузера введите сообщение «hello» и нажмите клавишу ввода. Теперь вы должны увидеть «hello», отраженный в журнале чата как на второй вкладке браузера, так и на первой вкладке браузера.
Теперь у вас есть базовый полнофункциональный чат-сервер!
© Django.Fun 2017-2020 | Django.Fun не связан с Django Software Foundation. Django - зарегистрированная торговая марка Django Software Foundation.
Responsive Chat Room - HTML & CSS - YouTube
Учебник, часть 2. Внедрение сервера чата | Документация Channels...
Как создать приложение-чат за двадцать минут / Хабр
Как сделать чат | Шаг 1) добавить HTML
How to Create a Simple Web-Based Chat Application
There is something wrong with the proxy server, or the address is incorrect.
Check your proxy settings or contact your network administrator to make sure the proxy server is working. If you don't believe you should be using a proxy server:
Wife Fucks Neighbors
Sex Chat Download
Hot House Free Videos
Lesbian Massage Videos
Black Porn Matters
f_auto/p/250262ae-96d5-11e6-b69b-00163ed833e7/2332059205/camfrog-video-chat-screenshot.png" width="550" alt="Chat Room Html" title="Chat Room Html">
