-
-
Save niallobrien/7eb51d17c977c46babb8 to your computer and use it in GitHub Desktop.
Vue componet using a Feathers backend over websockets
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div> | |
<input type="text" placeholder="Enter message" v-model="newMessage" @keyup.enter="addMessage"> | |
<button type="submit" @click="addMessage">Add message</button> | |
<ul> | |
<li v-for="message in messages"> | |
<span @dblclick="editMessage(message)" v-if="message != editedMessage">{{ message.text }}</span> | |
<input | |
type="text" | |
v-model="message.text" | |
v-if="message == editedMessage" | |
@blur="doneEdit(message)" | |
@keyup.enter="doneEdit(message)" | |
@keyup.esc="cancelEdit(message)"> | |
<a @click="deleteMessage($index)" v-if="message != editedMessage">[x]</a> | |
</li> | |
</ul> | |
</div> | |
</template> | |
<script> | |
import feathers from 'feathers/client' | |
import socketio from 'feathers-socketio/client' | |
import io from 'socket.io-client' | |
import _ from 'lodash' | |
const socket = io('http://localhost:3030') | |
const app = feathers().configure(socketio(socket)) | |
// Get the message service that uses a websocket connection | |
const messageService = app.service('messages') | |
export default { | |
data () { | |
return { | |
messages: [], | |
newMessage: '', | |
editedMessage: null | |
} | |
}, | |
ready () { | |
// Call the messages service on the server via websocket | |
messageService.find({}).then(result => { | |
this.messages = result.data | |
}) | |
// When a new message is created, add it to the messages array which is bound to the view. | |
messageService.on('created', message => this.messages.push(message)) | |
// Listen for when a message is deleted from the server and remove it from the view | |
messageService.on('removed', message => this.removeMessage(message)) | |
messageService.on('patched', message => { | |
// update the view for all socket clients | |
let index = _.findIndex(this.messages, { _id: message._id }) | |
this.messages[index].text = message.text | |
}) | |
}, | |
methods: { | |
addMessage () { | |
if (this.newMessage.trim()) { | |
// Persist a new message to the db | |
messageService.create({ text: this.newMessage }) | |
// Clear input field | |
this.newMessage = '' | |
} | |
}, | |
editMessage (message) { | |
this.beforeEditCache = message.text | |
this.editedMessage = message | |
}, | |
doneEdit (message) { | |
message.text = message.text.trim() | |
this.editedMessage = null | |
if (!message.text) { | |
this.removeMessage(message) | |
} | |
messageService.patch(message._id, message) | |
}, | |
cancelEdit (message) { | |
message.text = this.beforeEditCache | |
this.editedMessage = null | |
}, | |
// delete message from the db | |
deleteMessage (index) { | |
messageService.remove(this.messages[index]._id) | |
}, | |
// remove message from the view | |
removeMessage (message) { | |
// find the index of the obj to remove from the observable array | |
let index = _.findIndex(this.messages, { _id: message._id }) | |
// remove the obj at position [index] from the observable array | |
this.messages.$remove(this.messages[index]) | |
} | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Please substitute
ready()
withmounted()
for latest Vue version