shell
pip install django-socketio
python
INSTALLED_APPS = [
...
'socketio_app',
...
]
python
python
from socketio_app.decorators import async
from socketio_app.socketio_server import DjangoServer
@async
def chat_message(request, username, message):
@async
def connect(request):
@async
def disconnect(request):
shell
npm install vue-socket.io socket.io-client --save
script
import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'
vue
<template>
<div>
<ul>
<li v-for="message in messages" :key="message.id">
<span>{{ message.username }}: </span>
<span>{{ message.message }}</span>
</li>
</ul>
<input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Enter your message" />
</div>
</template>
<script>
export default {
data() {
return {
messages: [],
newMessage: '',
}
},
mounted() {
this.$socket.on('chat', (data) => {
this.messages.push(data)
})
},
methods: {
sendMessage() {
this.$socket.emit('chat_message', {
username: 'John',
message: this.newMessage,
})
this.newMessage = ''
},
},
}
</script>
shell
python manage.py runserver
shell
npm run serve
