Firebase로 먼저 채팅을 해보도록 하겠습니다.
11336 단어 JavaScriptFirebase
Firebase란 무엇입니까?
실시간 통신이 가능한 것 같습니다.
이 글을 쓰는 단계에서 나는 아직 쓸모가 없다.
https://www.firebase.com/
먼저 로그인
사인을 안 하신 분들은 사인을 해야 돼요.
로그인하면 대시보드가 자동으로 표시됩니다.
APP 추가
추가는 이런 느낌이에요.
간단한 이야기를 하다
http://lite.runstant.com/
runstant 등 브라우저에서 JS를 편집하면 바로 실행할 수 있는 서비스를 사용합니다.
이번에는 runstant를 사용합니다.
완성형은 이런 느낌이에요.
HTML 코드
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>${title}</title>
<meta name="description" content="${description}" />
<style>${style}</style>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script>${script}</script>
</head>
<body>
name:<input type="text" name="name" id="name" value="" />
message:<input type="text" name="message" id="message" value="" />
<button type="button" id="send">send</button>
<div id="log"></div>
</body>
</html>
js 코드
window.onload = function() {
var fb = new Firebase("https://<自分で追加したAPPのURL部分>.firebaseio.com/");
var chatStore = fb.child('chat');
chatStore.on('child_added', function(dss) {
addMessage(dss.val());
});
var inputName = document.getElementById('name');
var inputMessage = document.getElementById('message');
var sendButton= document.getElementById('send');
function send (){
chatStore.push({
name:inputName.value,
message:inputMessage.value,
});
}
sendButton.onclick = send;
inputName.onkeydown = function(e){
if(e.keyCode === 13){
inputMessage.focus();
}
};
inputMessage.onkeydown = function(e){
if(e.keyCode === 13){
send();
}
};
var logArea = document.getElementById('log');
function addMessage(value){
var div= document.createElement('div');
div.textContent = value.name + ': ' + value.message;
logArea.appendChild(div);
}
};
코드 (모두)
설명 좀 해주세요.
var nanika = fb.child('なにか')JS에서 설명하자면.var nanika = {};이런 느낌.
Firebase에 JS 개체 구조의 데이터 저장소를 만들었습니다.nanika.push(value)이것은push에서 적당한 키를 분배하고 키와 관련하여value를 추가합니다.nanika[適当なkey] = value의 느낌.
nanika의 구조
nanika = {
適当なkey: value,
}
를 클릭하십시오.
value가 대상이라면 더 깊은 데이터 저장소를 만들 수 있습니다.nanika.on('child_added', function(datasnapshot){});on 이벤트를 추가합니다.
child_added 이벤트는nanika에 데이터를 추가할 때 발생하며, 리셋 함수의 매개 변수는 datasnapshot (데이터를 추가한 대상이 있음) 전달됩니다.
또한 fb.child('nanika')에서nanika에 연결했을 때에도 지금까지 추가된 데이터가 존재하면 추가된 순서에 따라child_added 이벤트가 발생했습니다.
키 또는 추가 데이터를 dss = datasnapshot 로부터 수신하려면 다음을 수행합니다.
상을 받다dss.key()가치를 얻다dss.val()이 정도만 기억하면 수다부터 떨 수 있어!
Reference
이 문제에 관하여(Firebase로 먼저 채팅을 해보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/simiraaaa/items/b5678dba2ee3a2a1a912
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>${title}</title>
<meta name="description" content="${description}" />
<style>${style}</style>
<script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
<script>${script}</script>
</head>
<body>
name:<input type="text" name="name" id="name" value="" />
message:<input type="text" name="message" id="message" value="" />
<button type="button" id="send">send</button>
<div id="log"></div>
</body>
</html>
window.onload = function() {
var fb = new Firebase("https://<自分で追加したAPPのURL部分>.firebaseio.com/");
var chatStore = fb.child('chat');
chatStore.on('child_added', function(dss) {
addMessage(dss.val());
});
var inputName = document.getElementById('name');
var inputMessage = document.getElementById('message');
var sendButton= document.getElementById('send');
function send (){
chatStore.push({
name:inputName.value,
message:inputMessage.value,
});
}
sendButton.onclick = send;
inputName.onkeydown = function(e){
if(e.keyCode === 13){
inputMessage.focus();
}
};
inputMessage.onkeydown = function(e){
if(e.keyCode === 13){
send();
}
};
var logArea = document.getElementById('log');
function addMessage(value){
var div= document.createElement('div');
div.textContent = value.name + ': ' + value.message;
logArea.appendChild(div);
}
};
nanika = {
適当なkey: value,
}
Reference
이 문제에 관하여(Firebase로 먼저 채팅을 해보도록 하겠습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/simiraaaa/items/b5678dba2ee3a2a1a912텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
