In-Game IRC Chat
Introduction
This tutorial is to explain a concept, rather than providing all of the coding for you. It is aimed at experienced users who have knowledge of Javascript and IRC chat and wish to know how to implement the latter within their game.
What is it?
IRC, Internet Relay Chat, is the standard protocol for Internet chat rooms.
Why would I want it?
If you are building an MMORPG or other online game you may wish to consider adding some form of chat interface. By integrating IRC you embed a standardised tool, and one which you can use an external client to connect to, so that your player moderators have a much better interface to work with and don't even have to be in the game.
Requirements
You need a server that will allow you to host IRC bots.
You need to be running in a web browser.
You need a chat server to connect to; there are thousands across the web and that's outside the remit of this tutorial. They must however have webirc set up on their end.
Step One: Set up your frames
You need an iFrame, positioned above the game window, where you want the chat box to be. You can use Javascript to manipulate this iFrame later so don't worry about it being a fixed blob.
You can use my tutorial on DOM elements here:
Step Two: Set up KiwiIRC
KiwiIRC is a javascript based client, which is what we need. More importantly it is open source. It needs to be set up on a web server, so make sure your web host allows IRC bots, otherwise you will end up in a heap of kobold.
Here is the guide I used:
https://github.com/KeiroD/furryavalon/wiki/Quickly-set-up-KiwiIRC
Step Three: Test KiwiIRC
Your IRC client should now work at http://your-website:7778
Step Four: Skin your IRC client
You will want to edit the theme files within kiwiIRC, to remove much of the content.
Here's a basic set up:
#kiwi .toolbar {
display: none; !important;
}
#kiwi .right_bar {
display: none; !important;
}
#kiwi .nick {
display: none; !important;
}
#kiwi .memberlists_resize_handle {
display: none; !important;
}
#kiwi .input_wrap {
display: none; !important;
}
#kiwi .input_wrap {
left: 7px; !important;
}
#kiwi .panels {
top: 0px !important;
right: 0px !important;
}
Basically what we are doing is hiding anything which lets us change channel, anything that is unnecessary, because we only have a small space to work with. We whittle it down until we just have a chat box and an input box.
Step Four: add this plugin (to KiwiiRC)
The following plugin merely takes you straight into chat instead of loading the server selection screen.
<script>$('.server_details button').click();</script>.
Step Five: Set up your iFrame
You will want to change the src of the iFrame using Javascript from inside your game once you know the player's name.
You will want to set the src to: http://your-website:7778?nick=%%%%
Where %%%% is their name.
Step Six: Set up your channel
Register for channel services and generally set up your channel as you like it.
Step Seven: Continue to restyle your chat box until it fits your game
As it stands I am left with this.
As a proof of concept for this tutorial, that's fine. It works and all.
But with a bit of work it can quite easily be made to look like this:
I just need to do the, er, bit of work. But that's styling, which is up to you and unique to your game.
Step Eight: credit and link to KiwiIRC
As I removed the toolbar which contains the link to KiwiIRC, it would be nice to properly credit them and add a link to their website, and then to donate to their funds.
Considerations
IRC nicknames are changeable, so you will want a server with NickServ services enabled.
You could get players to authenticate themselves, or you could do it for them, but you would need their password in plain text for that, which is a no no.
If your player disconnects dirtily they will still be ghosted on the server so will have to pick a new nickname.
Always have permission of the IRC network to open a channel there, and always make sure your web host is happy running an IRC bot.

