Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
//********************************************
//Sample Chat App (html part with comment)
//2016-12-04 MasterPoppy
//********************************************
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Sample Chat App</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js'></script>
<link rel='stylesheet' type='text/css' href='https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css' />
<style type='text/css'>
@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
.ui,
.item,
input {
font-family: 'Noto Sans JP', helvetica, sans-serif;
}
.ui,
.item,
.ui.header,
.ui.table {
font-size: 1.1rem;
line-height: 1.5rem;
}
.ui.container {
padding-top: 1vh;
width: calc(100% - 16px);
}
.ui.middle.attached.segment {
height: calc(100vh - 165px);
overflow-y: auto;
}
</style>
</head>
<body>
<!-- semantic-uiでチャットアプリのUIデザイン -->
<div id='main' class='ui container'>
<div id='id-header' class='ui top attached block header'>
Sample Chat App
</div>
<div class='ui middle attached menu'>
<div id='id-ch' class='item'>
通信チャンネル xxx
</div>
<div class='menu'>
<div id='username' class='item'><i class='user icon'></i>USRNAME</div>
</div>
<div class='right menu'>
<a id='id-logout' class='item'>LOGOUT</a>
</div>
</div>
<div id='log' class='ui middle attached segment'>
<table class='ui celled padded table'>
</table>
</div>
<div class='ui bottom attached segment'>
<div class='ui fluid action input'>
<input id='id-input' type='text' placeholder='・・・'>
<div id='id-enter' class='ui button'>ENTER</div>
</div>
</div>
</div>
<!-- チャットアプリのUIデザインここまで-->
<script>
//http-inから通信チャンネルとユーザの名前を取得する
$(document).ready(function() {
$.ajax({
'type': 'POST',
'url': location.href,
'dataType': 'json',
'data': 'init',
'timeout': 0
}).done(function(data) {
$('#id-ch').text('通信チャンネル ' + data.channel);
$('#username').html('<i></i>' + data.name).children().addClass('user icon');
log(data.timestamp, 'システムログ', 'チャンネル ' + data.channel + ' で開始しました。 チャンネルは ObjectDesc で変更できます。', 1);
//http-inとのロングポーリングを開始 (ajax comet)
getchat();
}).fail(function(data) {
end = new Date();
log(gettimestamp(), 'ERROR(0)', data.statusText, 2);
});
}, false);
function getchat() {
$.ajax({
'type': 'POST',
'url': location.href,
'dataType': 'json',
'data': 'getchat',
'timeout': 0
}).done(function(data) {
log(data.timestamp, data.name, data.body);
scrollbottom();
//再帰呼び出しでAjax Comentをループ
getchat();
}).fail(function(data) {
if (data.status == 504) {
//タイムアウトしたら再リクエスト
getchat();
} else {
end = new Date();
log(gettimestamp(), 'ERROR(1)', data.statusText, 2);
}
});
}
$('.ui.button').on('click', function() {
var speech = $('#id-input').val();
if (speech !== '') {
$('#id-input').val('');
$.ajax({
'type': 'POST',
'url': location.href,
'dataType': 'json',
'data': JSON.stringify({
'speech': speech
})
}).done(function(data) {
log(data.timestamp, data.name, data.body);
scrollbottom();
}).fail(function(data) {
log(gettimestamp(), 'ERROR(2)', data.statusText, 2);
scrollbottom();
});
}
});
//キーボードのEnterで発言できるようにする
$('#id-input').on('keydown', function(e) {
if (e.keyCode === 13) {
$('#id-enter').trigger('click');
}
});
//LOGOUTを押下するとHUDをDetachする
$('#id-logout').on('click', function() {
$.ajax({
'type': 'POST',
'url': location.href,
'data': 'logout'
});
});
//タイムスタンプを生成するユーザ関数
function gettimestamp() {
var d = new Date();
var hour = (d.getHours() < 10) ? '0' + d.getHours() : d.getHours();
var min = (d.getMinutes() < 10) ? '0' + d.getMinutes() : d.getMinutes();
var sec = (d.getSeconds() < 10) ? '0' + d.getSeconds() : d.getSeconds();
return (hour + ':' + min + ':' + sec);
}
//チャットログ欄に書き込む処理を統合する
//a = タイムスタンプ, b = 発言者, c = 発言内容
//d = 1 のときは 成功色, d = 2 のときは警告色にする
function log(a, b, c, d) {
//Tableの末行にログを追加する
$('table').append(
$('<tr></tr>')
.append($('<td></td>').text(a).addClass('left top aligned single line one wide'))
.append($('<td></td>').text(b).addClass('left top aligned single line one wide'))
.append($('<td></td>').text(c).addClass('left top aligned'))
);
//dの値があれば色を付ける
if (d == 1) {
$('table tr:last').addClass('positive');
} else if (d == 2) {
$('table tr:last').addClass('error');
}
}
function scrollbottom() {
$('#log').scrollTop($('#log').scrollTop() + $('#log').height());
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment