Your first script

Attach a page script to your installed chat room. It shows a greeting notice when you join and sends a message when you click a button. Start from a page where you finished 5-minute setup.

Full code

Paste the code below into a single HTML file and open it.

<!-- 1. Preload code: before 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. Chat room -->
<u-chat room="my-room" style="display:inline-block; width:100%; max-width:500px; height:500px;"></u-chat>
<button id="hello" disabled>Say hello</button>

<!-- 3. Page script -->
<script>
var myRoom = null;

U.chat('my-room').on('after.join', function (room, data) {
	myRoom = room;
	document.getElementById('hello').disabled = false;
	room.print('You joined. Your nickname is ' + escapeHtml(data.my.nick) + '.');
});

U.chat('my-room').on('after.message', function (room, data) {
	if (data.user.nick !== room.my.nick) document.title = 'New message - ' + data.user.nick;
});

document.getElementById('hello').addEventListener('click', function () {
	if (!myRoom.action.send('Hello')) alert('You cannot send right now.');
});

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

When you join, a notice line appears in the chat room and the button turns on. Click the button to send Hello under your nickname. When someone else speaks, the browser tab title changes.

Preload code

uchat.js loads with async, so U.chat may not exist yet when your page script runs. The preload code on the first line stores events registered with U.chat(...).on(...) in U.events, and uchat.js picks them up when it is ready. That is why you must add it before uchat.js.

Without the preload code, you get a U is not defined error or your events are not registered. Load order and use with multiple chat rooms and SPAs are covered in Async loading and multiple chat rooms.

Receive events

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

• Pick a chat room with U.chat('room-id') and register an event with .on(eventName, callback).
• The callback always gets two arguments, (room, data). room is the chat room object, and data depends on the event.
• after.join fires when joining finishes and your own info has arrived. data.my is your info.
• after.message fires for every chat message line. data.user is the sender and data.content is the text. It also fires for past messages you receive when joining and for messages you send.

Return false from an event that starts with before. to block the default handling. The list of events and which ones you can block are in Events.

Use the room object

Use	What it does
room.print(html)	Shows a notice line on your screen only. Others do not see it. The value is parsed as HTML, so escape any user input.
room.action.send(message)	Sends a message under your nickname. Returns false if not yet connected, if the text is empty, or if you must wait because of slow mode.
room.my	Your info (nick, auth, and so on). It is an empty object before you join.

All properties and functions of room are in U.chat() and the room object.

Next steps

• Let members join with their site nickname → Member integration
• Put buttons and dialogs inside the chat room → Extending the skin UI
• Exchange data between visitors → Sending and receiving real-time data