はじめてのスクリプト

設置したチャットルームにページスクリプトを追加し、入室したらあいさつの案内を表示し、ボタンでメッセージを送ってみます。5分で設置を終えたページから始めます。

コード全体

次のコードを1つのHTMLファイルに貼り付けて開いてみてください。

<!-- 1. 事前登録コード: uchat.jsより前に -->
<script>U=window.U=window.U||{},U.events=U.events||[],U.chat=function(n){return{on:function(e,t){U.events.push([n,e,t])},off:function(e){for(var t=U.events.length;t>0;)U.events[--t][0]==n&&U.events[t][1]==e&&U.events.splice(t,1)}}};</script>
<script async src="https://client.uchat.io/uchat.js"></script>

<!-- 2. チャットルーム -->
<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
<button id="hello" disabled>こんにちはを送る</button>

<!-- 3. ページスクリプト -->
<script>
var myRoom = null;

U.chat('my-room').on('after.join', function (room, data) {
	myRoom = room;
	document.getElementById('hello').disabled = false;
	room.print('入室しました。あなたのニックネームは ' + escapeHtml(data.my.nick) + ' です。');
});

U.chat('my-room').on('after.message', function (room, data) {
	if (data.user.nick !== room.my.nick) document.title = '新着メッセージ - ' + data.user.nick;
});

document.getElementById('hello').addEventListener('click', function () {
	if (!myRoom.action.send('こんにちは')) alert('今は送信できません。');
});

function escapeHtml(text) {
	return String(text).replace(/[&<>"']/g, function (c) {
		return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
	});
}
</script>

入室するとチャットルームに案内行が表示され、ボタンが有効になります。ボタンを押すと自分のニックネームで こんにちは が送信され、ほかの人が発言するとブラウザのタブのタイトルが変わります。

事前登録コード

uchat.js は async で読み込むため、ページスクリプトが実行される時点ではまだ U.chat がないことがあります。1行目の事前登録コードは、U.chat(...).on(...) で登録したイベントを U.events に保管しておき、uchat.js の準備ができたらそのまま引き継ぎます。そのため、uchat.js より前に入れる必要があります。

事前登録コードを省くと、U is not defined エラーが出たり、イベントが登録されなかったりします。読み込み順序と、複数のチャットルームやSPAでの使い方は非同期読み込みと複数のチャットルームにあります。

イベントを受け取る

U.chat('my-room').on('after.join', function (room, data) { ... });

• U.chat('room-id') でチャットルームを選び、.on(eventName, callback) でイベントを登録します。
• コールバックは常に (room, data) の2つの引数を受け取ります。room はチャットルームオブジェクトで、data はイベントごとに異なります。
• after.join は入室が完了し、自分の情報を受け取ったときに発生します。data.my が自分の情報です。
• after.message はチャットメッセージ1行ごとに発生します。data.user が送信者、data.content が内容です。入室時に受け取る過去の会話や、自分が送ったメッセージでも発生します。

before. で始まるイベントで false を返すと、デフォルトの処理を止められます。イベントの一覧と止められるイベントはイベントにあります。

roomオブジェクトを使う

使うもの	できること
room.print(html)	自分の画面にだけ案内行を表示します。ほかの人には見えません。値はHTMLとして解釈されるので、ユーザーの入力はエスケープしてから入れます。
room.action.send(message)	自分のニックネームでメッセージを送ります。接続前、内容が空、またはスローモードで待つ必要がある場合は false を返します。
room.my	自分の情報(nick、auth など)。入室前は空のオブジェクトです。

room のすべてのプロパティと関数はU.chat() と room オブジェクトにあります。

次のステップ

• 会員のニックネームで入室させる → 会員連携
• チャットルーム内にボタンやダイアログを入れる → スキンUIを拡張する
• 接続者同士でデータをやり取りする → リアルタイムデータの送受信