（索引）：28 WebSocket 连接到“ws://127.0.0.1:8000/niwera/stories/1/”失败：
当我在 http://127.0.0.1:8000/niwera/stories/ 并单击“entrar na história（加入故事）”时，此错误出现在我的开发工具控制台中，但 python django 终端返回 200/300。
这是我的代码：
import os
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import niwera_rpg.routing
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'niwera.settings')
application = ProtocolTypeRouter({
"http": get_asgi_application(),
"websocket": URLRouter(niwera_rpg.routing.websocket_urlpatterns)
})
ALLOWED_HOSTS = []
# Application definition
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'niwera_rpg',
'channels'
]
CHANNEL_LAYERS = {
'default': {
'BACKEND': "asgi_redis.RedisChannelLayer",
'CONFIG': {
'hosts': [('localhost', 6379)],
},
'ROUTING': 'niwera_rpg.routing.channel_routing',
},
}
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
ROOT_URLCONF = 'niwera.urls'
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
WSGI_APPLICATION = 'niwera.wsgi.application'
urlpatterns = [
path('admin/', admin.site.urls),
path('niwera/', include('niwera_rpg.urls'))
]
<body>
<div class="container">
<h1>Histórias Disponíveis:</h1>
{% for story in stories %}
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">{{ story.title }}</h5>
<p class="card-text">{{ story.description }}</p>
<a href="#" class="btn btn-primary" onclick="joinStory({{ story.id }})">Entrar na História</a>
</div>
</div>
{% endfor %}
</div>
<script>
function joinStory(storyId) {
console.log(`Joining story ${storyId}...`);
const socket = new WebSocket(
`ws://${window.location.host}/niwera/stories/${storyId}/`);
socket.onopen = function (event) {
console.log('WebSocket connection opened.');
const data = {
action: 'join_story',
player_id: 'player123'
};
socket.send(JSON.stringify(data));
};
socket.onmessage = function (event) {
const data = JSON.parse(event.data);
console.log(data);
};
socket.onclose = function (event) {
console.log('WebSocket connection closed.');
};
}
</script>
</body>
</html>
<div class="container">
<h1>Detalhes da História</h1>
<h2>{{ story_data.title }}</h2>
<p>{{ story_data.description }}</p>
<h2>Personagens Conectados</h2>
<ul>
{% for character in connected_characters %}
<li>{{ character.name }} - HP: {{ character.hp }} - XP: {{ character.xp }}</li>
{% endfor %}
</ul>
</div>
import json
from channels.generic.websocket import AsyncWebsocketConsumer
class StoryConsumer(AsyncWebsocketConsumer):
async def connect(self):
print('Conectado')
await self.accept()
async def disconnect(self, close_code):
print('Desconectado')
pass
async def receive(self, text_data):
data = json.loads(text_data)
print(data)
print('Recebido')
action = data.get('action')
if action == 'join_story':
story_id = data.get('story_id')
response_data = {
'action': 'join_story',
'story_id': story_id,
'story_data': {...},
'connected_characters': [...],
}
await self.send(text_data=json.dumps(response_data))
from django.urls import path
from .consumers import StoryConsumer
websocket_urlpatterns = [
path('/ws/stories/<int:story_id>/', StoryConsumer.as_asgi()),
]
from django.urls import path
from . import views
urlpatterns = [
path('stories/', views.stories, name='stories'),
path('stories/<int:story_id>/',
views.story_details, name='story_details'),
]
from django.shortcuts import render
from django.http import HttpResponse
from .models import Story
def stories(request):
stories = Story.objects.all()
context = {
'stories': stories
}
return render(request, 'stories.html', context)
def story_details(request, story_id):
story_data = {...}
connected_characters = [...]
return render(request, 'story_details.html', {'story_data': story_data, 'connected_characters': connected_characters})
我尝试了很多事情，我希望当我点击加入故事的按钮时，它会带我到另一条包含“story_details.html”信息的路线