#firebase:firebase example
How to make a very simple public #chatbox using firebase.
Main library: firebase:firebase
Main elements: Firebase Firebase.push Firebase.onChildAdded
Gist: https://gist.github.com/kasperpeulen/2d1d6184e6cb5fecdac1
Tags: #chatbox
| <!doctype html> | |
| <html> | |
| <head> | |
| <script src="https://cdn.firebase.com/js/client/2.2.7/firebase.js"></script> | |
| <!--material design lite--> | |
| <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> | |
| <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.purple-orange.min.css"> | |
| <link rel="stylesheet" href="styles.css"/> | |
| </head> | |
| <body> | |
| <div class="wrapper mdl-shadow--2dp"> | |
| <!--div containing all the message--> | |
| <div id='messagesDiv'></div> | |
| <!--input name--> | |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> | |
| <input class="mdl-textfield__input" id='name' type="text"> | |
| <label class="mdl-textfield__label" for="name">Name</label> | |
| </div> | |
| <!--input message--> | |
| <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> | |
| <input class="mdl-textfield__input" id='message' type="text"> | |
| <label class="mdl-textfield__label" for="message">Message</label> | |
| </div> | |
| <!--send button--> | |
| <button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Send</button> | |
| </div> | |
| <script type="application/dart" src="main.dart"></script> | |
| </body> | |
| </html> |
| import 'dart:html'; | |
| import 'package:firebase/firebase.dart'; | |
| InputElement nameInput = querySelector('input#name'); | |
| InputElement messageInput = querySelector('input#message'); | |
| DivElement messageDiv = querySelector('#messagesDiv'); | |
| ButtonElement sendButton = querySelector('button'); | |
| void main() { | |
| // You can also use your own firebase url, if you have one. | |
| // Or signup for firebase at: https://www.firebase.com/signup/ | |
| String firebaseUrl = 'https://dartnow-example.firebaseio.com/'; | |
| Firebase firebase = new Firebase(firebaseUrl); | |
| messageInput.onKeyPress.listen((e){ | |
| if (e.keyCode == KeyCode.ENTER) { | |
| addMessageToFireBase(firebase); | |
| } | |
| }); | |
| sendButton.onClick.listen((e) => addMessageToFireBase(firebase)); | |
| firebase.onChildAdded.listen((e) { | |
| DataSnapshot snapshot = e.snapshot; | |
| Map message = snapshot.val(); | |
| displayChatMessage(message['name'], message['text']); | |
| }); | |
| } | |
| void addMessageToFireBase(Firebase firebase) { | |
| String name = nameInput.value; | |
| String text = messageInput.value; | |
| firebase.push().set({'name': name, 'text': text}); | |
| messageInput.value = ''; | |
| } | |
| void displayChatMessage(String name, String text) { | |
| messageDiv.append(new DivElement()..innerHtml = '<b>$name:</b> $text'); | |
| } |
| name: firebase.firebase_Firebase_Firebase.push_Firebase.onChildAdded_'chatbox' | |
| description: | | |
| How to make a very simple public #chatbox using firebase. | |
| homepage: https://gist.github.com/kasperpeulen/2d1d6184e6cb5fecdac1 | |
| homepage: https://gist.github.com/kasperpeulen/2d1d6184e6cb5fecdac1 | |
| environment: | |
| sdk: '>=1.0.0 <2.0.0' | |
| dependencies: | |
| firebase: '>=0.6.1 <0.7.0' |
| .wrapper { | |
| margin: 20px auto; | |
| max-width: 500px; | |
| padding: 20px; | |
| } | |
| .mdl-textfield { | |
| width: 180px; | |
| margin-right: 30px; | |
| } |