Skip to content

Getting Started

Jump to bottom
Jihye Hong edited this page Apr 3, 2017 · 16 revisions

Overview

Mindless Framework을 이용하는 방법에 대하여 설명합니다.

Key Concepts

Mindless Framework을 이용하면 Cloud 혹은 local 연결을 통한 타 기기와의 연결 및 메세지 전송이 가능합니다.

Interfaces

Mindless에서는 기기 간 연결 설정, 메세지 송수신에 대한 API들을 제공합니다.

API를 이용하려면 우선, HTML에서 Mindless Framework를 불러와야 합니다. 해당 내용은 HTML head에 아래와 같이 작성합니다.

<script src="mindless.js"></script>

Web APIs

MILE.init()

Web Socket 통신을 위하여 클라우드와 socket.io 연결 및 메세지 전송 가능 환경 구축

MILE.init();

MILE.send (type, message)

  • type: 메세지의 종류. 웹 앱 개발자가 메세지 타입 정의 가능 (eg, "chat", "notice" ...)
  • message: 메세지의 텍스트 데이터로 실제 주고 받는 메세지 내용

연결된 다른 기기에 메세지 전송

 MILE.send("chat", "Hello Mindless Framework!");

MILE.on (type, callback)

  • type: 메세지의 종류. 웹 앱 개발자가 메세지 타입 정의 가능 (eg, "chat", "notice" ...)
  • callback: 메세지가 수신되었을 때 실행되는 콜백 함수

연결된 다른 기기로부터 수신한 메세지 처리

var showMessage = function(data) {
  console.log("Received Message: " + data);
}
MILE.on("chat", showMessage);

Examples

Example. Simple Chatting Demo

<html>
<head>
  <script src="mindless.js"></script>
  <script>
  window.addEventListener("load", function() {
    MILE.init();
    // When a user presses the enter key
    document.querySelector("#input").addEventListener("keypress", function(e) {
      if (e.keyCode == 13) {
        sendMessage();
      }
    });
    // When a user clicks the send button
    document.querySelector("#button").addEventListener("click", function(e) {
      sendMessage();
    });
  });
  // send the message to other clients
  function sendMessage() {
    var inputText = document.querySelector("#input").value;
    if (inputText != "") {
      MILE.send("chat", inputText);
      document.querySelector("#input").value = "";
    }
  }
  // receive the message from other client
  MILE.on("chat", function(data) {
    document.querySelector("#content").innerHTML += "<li>[chat] " + data + "</li>";
    console.log("Received Message: " + data);
  });
  </script>
  </head>
  <body>
    <div id="content"></div>
    <input id="input"><button id="button">Send</button>
    <div id="bg">
      <div id="url"></div>
    </div>
  </body>
</html>
Clone this wiki locally