-
-
Save masterpoppy/6f876f272b22f5bbf3e5b7c987152fed to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//******************************************** | |
//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