If you're a regular chatter, the chances are good that you've used a custom chat interface. You've certainly seen other WebTV'ers using them -- complete with popup messages, custom buttons, and private message windows. Some chats even provide RealAudio to listen to and webcam screens to keep an eye on while you're chatting.
IRC interfaces are one of the clever ways that WebTV users themselves enhance and customize the WebTV experience. Even though there are over 100 popular chat interfaces that you can use, it's easy to have your very own to make just the way you'd like!
In this special Net4TV Voice series, Diane Dumas, a WebTV user who also is a professional programmer, shows you how to create your own personal IRC chat interface.
You don't have to be a programmer at all -- you can copy the code directly from this page and paste it into your homepage editor on your own website, or you can transload it directly to your home directory from Diane's site:
http://members.tripod.com/~dianedumas/chat/basicchat.html
Once you have the chat code in your homepage editor, you'll want to start changing it to make it personal. Of course, if you're making a homepage, you probably already know how to add your choice of background graphic or color to the page. So, let's look at the basic chat code itself to see what's going on and where we can begin to personalize it. We'll put our comments in blue so that you can see what's going on.
Basic Chat Code for Webtv IRC Chat
<!-- First, we need to set up the normal HTML page. -->
<HTML>
<!-- Basic Chat by Diane Dumas -->
<!-- Brought to you by Net4TV Voice -->
<!-- Change host=, port=, and channel=#, to your chat room -->
<!-- Permission is granted to copy, modify, and transload -->
<HEAD>
<TITLE>Basic Chat</TITLE>
<!-- The basic WebTV chat calls go in the head portion of the HTML page. You can change the host to your favorite IRC chat server, and the room name to the room that you want it to go to automatically (these are shown in yellow in the code). You can also set another server port number if you know it, but 6667 is the most common port for IRC chat. -->
<wtvchat host=chat.talkcity.com port=6667 channel=#DianesChatRoom>
<!-- The JavaScript function in the head is used to send the messages that you'll type in the chat's message box to the WebTV chat program. -->
<SCRIPT>
function addMessage() {
Chat.addChannelMessage(document.chat.input.value)
document.chat.input.value=""
}
</SCRIPT>
</HEAD>
<BODY bgcolor=181818>
<!-- Next, we'll make a table for the page to keep everything lined up just right. The chat screen itself will go in the top row of the table. We've made the row two columns wide (colspan=2) because we're going to use two columns in the row that comes below it. -->
<table><tr>
<td colspan=2>
<!-- wtvchattranscript is the built-in WebTV chat function that puts the scrolling chat (where you see everyone's words) on the screen. -->
<wtvchattranscript height=300 width="100%">
</td></tr>
<!-- Then we close the table cel and row that contain the scrolling screen, and open the row that will have the message box and whisper button. -->
<tr>
<td>
<!-- In the left table cel, we'll put our chat input box as a form. The form's action calls the JavaScript function that we put in the page head to send the message when you hit return. We've also used a form background color to make it easy to read and match the background, and have set "autoactivate" so that you don't have to click before you can start typing in the input box. -->
<form id="chat" action="javascript:addMessage()//">
<input id="input" width="100%" bgcolor=181818 text=gold cursor=gold font=proportional autoactivate nohighlight>
</td>
<!-- In the right hand table cel, we've put the "Whisper" button. We've used a built-in WebTV button that's stored in the ROM cache, and have set the button to call another built-in WebTV chat function for the whisper box when it is clicked.-->
<td>
<input type="button" text=gold value="Whisper" borderimage=file://ROM/Borders/ButtonBorder2.bif onClick="window.open('whisper.panel','whisper')">
<!-- Now all we have to do is close the table cel and row, close the table, and then close the body and the HTML page. -->
</td></tr>
</table>
</BODY>
</HTML>
If you'd like to see how the basic chat works, just click here to try it out. If you plan to transload rather than copy and paste, you can bookmark the page when you get there to use in the Transloader.
If you're already upgraded and you'd rather copy and paste, use this page. It's the same code that you see here, but all of the comments and Net4TV Voice sidebars are stripped out so you'll get nothing but nice clean code.
What we've created today is a basic no-frills WebTV chat interface that takes you to a single chatroom. If you want your friends on WebTV to join you in your favorite room, you can set the room name in the page and send it to them by email. All they need to do is click on the link and they'll be chatting with you.
Next Time....
Next issue, we'll take this basic code and modify it with some additional functions to allow you to change rooms, servers and ports. And then, in following issues, we'll show you how to add your own popup messages, a selection of background music, and even how to listen to radio stations on the Net while you're chatting.
You'll find the best WebTV chat interfaces on the Net at Diane's Chat Menu Page. Be sure to check out this great resource, and see everything that can be done with WebTV chat.
Diane has made this code freely available to you, and you can modify it as you like and even give it to your friends. But please leave the credit comment in the HEAD portion of the page -- it's the nice thing to do to let people know who got you started.
