WebSocketのクライアント(ブラウザ)側の実装サンプル。
テキストフィールドにメッセージを入れてSubmitボタンをクリックすると
他のクライアントにもメッセージが配信される。そんだけ。
Bootstrapを使ってみたけど、説明するって意味では、
明らかにコード可読性の低下要因でしかないな～......
以下の解説の用語とかは信用しないでください。
jQueryとBootstrap使ってるけれども正しい使い方ではないと思う。
基本的には、
- Websocketプロトコルでのアクセス先(wsUri)を指定
- Websocketをnewする(websocket)
- websocketに対して必要なメソッドを実装(ここではonerror, onopen, onmessage)
- クライアント上の操作内容に応じてjQueryでぐりぐりする
<html>
<head>
<title>Chatter</title>
<link href="css/bootstrap.min.css" rel="stylesheet"></link>
<script src="./js/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
var wsUri = "ws://" + document.location.host + "/WebSocketChatter/MessageReceiptor";
var websocket = new WebSocket(wsUri);
websocket.onerror = function(evt) {
};
websocket.onopen = function(evt) {
};
websocket.onmessage = function(message) {
console.log('Received Text:'+message.data);
$('<div class="well row" style="margin-bottom: 2px;">
'+message.data+'</div>
').appendTo('#container_message');
};
$('#btn_submit').on('click', function(){
var text = $('#text_message').val();
if(text !== '') {
websocket.send(text);
console.log('Send Text:'+text);
}
});
$('#btn_clear').on('click', function(){
$('#text_message').val('');
});
});
</script>
</head>
<body>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
<h1 class="label-primary" style="border-radius: 3px 3px;">
WebSocketChatter</h1>
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
<h2 class="label-info">
入力項目</h2>
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
<label for="text_message">Message</label>
<input class="form-control" id="text_message" placeholder="Text Message" type="text" />
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-4 btn-toolbar">
<div class="btn-group">
<button class="btn btn-success" id="btn_submit" type="button">Submit <span class="glyphicon glyphicon-check"></span></button>
<button class="btn btn-danger" id="btn_clear" type="button">Clear <span class="glyphicon glyphicon-remove"></span></button>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-3">
</div>
<div class="col-lg-3">
<h2 class="label-info">
メッセージコンテナ</h2>
<div class="col-lg-12" id="container_message">
</div>
</div>
</div>
</body>
</html>
0 件のコメント:
コメントを投稿