forked from ApiRTC/ApiRTC-examples
-
Notifications
You must be signed in to change notification settings - Fork 0
/
simpleChatBox.html
100 lines (81 loc) · 3.99 KB
/
simpleChatBox.html
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cloud.apizee.com/libs/jquery-1.9.0.min.js"></script>
<script src="http://cloud.apizee.com/apiRTC/apiRTC-latest.min.js"></script>
</head>
<body>
<br/>
<input type="text" id="number" value="" placeholder="Enter Destination ID..." />
<input id="create" type="button" disabled="true" value="Registration Ongoing..." />
<div id="status"></div>
<!-- Here is your awesome chat box -->
<!-- It's hidden on page load -->
<div id="chatbox" data-id="" class="panel panel-default col-md-4" style="position:absolute; bottom:0px; right:10px;display:none">
<div class="panel-heading">
<h3 class="panel-title">My chat box</h3>
</div>
<div class="panel-body">
<div class="messages" style="height:250px;overflow:scroll">
</div>
<textarea id="my_message" placeholder="Your message" class="form-control" rows="3"></textarea>
</div>
</div>
<script>
var session = null,
imClient = null;
function startIM(destId) {
$("#chatbox").data('id',destId)
$("#chatbox").show();
$("#create").attr("disabled", "true");
//When you fill a message in my_message, we send send it
$('#my_message').on('keyup', function(e) {
if (e.which == 13) {
var destId=$('#chatbox').data('id');
var message=$("#my_message").val();
sendIMMessage(destId, message);
//Just reset your message box
$("#my_message").val('');
}
});
console.log("startIM with destId :" + destId);
}
function sendIMMessage(destId, message) {
console.log('sendIMMessage to ' + destId);
//In this example nickname is the ID
imClient.sendMessage(destId, message);
$('.messages').append('<div class="well"><span class="label label-success">me : </span> '+message+'<br></div>');
//Optionnal: we scroll the messages
$(".messages").scrollTop($('.messages').height());
}
function receiveIMMessageHandler(e) {
//If chatbox not visible, we set it visible
if (!$('#chatbox').is(':visible')) {
startIM(e.detail.senderId);
}
$('.messages').append('<div class="well"><span class="label label-danger">'+e.detail.senderNickname+' : </span> '+e.detail.message+'<br></div>');
//Optionnal, a little animation
$(".messages").scrollTop($('.messages').height());
}
function sessionReadyHandler(e) {
console.log('sessionReadyHandler :' + apiCC.session.apiCCId);
$("#status").append('<span> Your client Id is : ' + apiCC.session.apiCCId + '</span> ');
$("#create").attr("disabled", false).val("Create Chat Box");
//Instant Messaging client creation
apiRTC.addEventListener("receiveIMMessage", receiveIMMessageHandler);
imClient = apiCC.session.createIMClient();
$("#create").click(function () {
startIM($("#number").val());
});
}
function updatePresenceHandler(e) {
console.log('updatePresenceHandler :' + JSON.stringify(e.detail.connectedUsersList));
}
apiCC.addEventListener("updatePresence", updatePresenceHandler);
apiRTC.init({
apiKey : "myDemoApiKey",
onReady : sessionReadyHandler
});
</script>
</body>
</html>