STALK-IM-SDK-JS/example.html at master · S5Platform/STALK-IM-SDK-JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Channel Example</title>

<!-- Bootstrap and jquery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- stalk -->
<script src="https://rawgit.com/S5Platform/Stalk-SDK-JS/master/dist/stalk-im.min.js"></script>

<script type="text/javascript">
// Create new stalk
var stalk = new Stalk('https://im.stalk.io/', 'demo');
$(document).ready( function(){
  // channel01 을 생성합니다.
  stalk.openSimpleChannel('channel01', {'id':'james'}, function(err, channel){
    // 생성 후에 success 메시지를 보여줍니다.
    var html =  '<strong>Well done!</strong> Create simple channel success';
    $( "#success" ).html(html);
    $( "#success" ).show();
      // `message` event로 들어오는 data를 받아 화면에 출력합니다.
    channel.onMessage( function(data){
      $( "#success" ).html( '<strong>Received success</strong> : ' + data.text );
      // template을 복사하여 새로운 DOM 객체를 생성합니다..
      var newMessage = $( "#template" ).clone();
      // 새로 만든 DOM 객체를 수정합니다.
      newMessage.attr( "id", "template_"+ Date.now() );
      newMessage.html( data.text );
      // 새로 만든 DOM 객체를 ul DOM에 추가합니다.
      newMessage.appendTo( "#list" );
      newMessage.show();
      // 새로 생성한 DOM 객체에 class를 추가합니다.
      $( ".list-group-item-success" ).each(function(){
        $(this).removeClass( "list-group-item-success" );
      });
      newMessage.addClass( "list-group-item-success" );
    });
  });
});

var send = function( ){
  var msg = $( "#message" ).val();
  stalk.currentChannel().sendText( msg );
  $( "#message" ).val('');
};

</script>
</head>

<body>
<div class="container">

<div class="row" style="margin-top:20px;">
  <div class="col-sm-12">
    <div class="jumbotron">
      <h1>Simple Channel Example</h1>
      <p class="lead">Send a message with simple channel</p>
    </div>
    <div id="success" class="alert alert-success" role="alert" style="display:none">
    </div>

    <div style="display:flex;">
      <input class="form-control" placeholder="Input message" name="message" id="message" type="text" value=""/>
      <button type="submit" id="form-button" class="btn btn-primary" style="margin-left:10px;" onclick="send();">Send</button>
    </div>
    <span class="help-block">Input message to send. The message will be displayed in under area</span>

    <div class="row">
      <div class="col-sm-8">
        <h2>Received message</h2>
        <ul id="list" class="list-group">
          <li id="template" class="list-group-item" style="display:none;">There is no message</li>
        </ul>
      </div>
    </div>
  </div>
</div>

</div>
</body>
</html>