Net4TV Voice: Your Own IRC Chat 6: Pulling It All Together

How-To Feature

Your Own IRC Chat 6: Pulling It All Together

By Diane Dumas
(November 8, 1998)

If you have followed my chat series, you will notice that I've skipped Basic Chat 5. I wanted to include the plus audio bug fix into the chat, but BC-5 did not have audio and BC-6 did! So, I did BC-6 instead. I have also improve the JavaScript in this chat and you may learn some short cuts to validating your inputs.

This isn't the last one in the chat series, I plan on having BC-7 ready for next issue of Net4TV/Voice. And remember, you don't have to type out the code yourself. The link to a clean "copy and paste" version is at the end of this article -- just copy it, paste it into your own website, and then make the modifications here to make it your own personal chat!

<HTML>





<HEAD>
<TITLE>Basic Chat 6</TITLE>
<SCRIPT>

This is the header portion which starts the HTML page. The comments about the chat, head portion, title of the page, and start of the JavaScript are in this portion.

chatURL="basicchat-6.html"

Important: Change this to the name of the file you save it as on your homepage. This much match your file name to change rooms.

DT=document.URL.toString()

Gets the name of the file you used to load this page.

if (DT.indexOf("?") != -1) {

Checks to see if the file name has a question mark and if it does, it has been encoded with connection information.

bS=DT.indexOf("serv=")+5
bP=DT.indexOf("port=")+5
bC=DT.indexOf("chan=")+5
serv=DT.substring(bS,bP-5)
port=DT.substring(bP,bC-5)
chan=DT.substring(bC,DT.length)

This decodes the file name that was encoded and gets the Server, Port, and Channel information and puts them into variables.

}else{
serv="chat.talkcity.com"
port="6667"
chan="DianesChatRoom"
}

If the file name was not encoded, it defaults to these settings. You should change these to your own chat room settings. If you want to change the basic chat 6 to another room you will need to change the serv=, port=, and chan= to your chat room.

document.write("<wtvchat host="+serv+" port="+port+" channel=#"+chan+">")

Establishes contact with the chat service and makes a connection.

function addMessage() {
document.chat.input.focus()
Chat.addChannelMessage(document.chat.input.value)
document.chat.input.value=""
}

Notice the focus() used here so that the cursor will not jump to the dummy input line. (see below for more changes used to keep audio from cutting off on the webtv plus.

This takes your typed message from the chat input form (chat text input line) and sends the message on the chat channel. Then erases the text line.

function addMsg1() {
Chat.addChannelMessage(document.msg.nick1.value+" "+document.msg.text1.value)
document.msg.text1.value=""
}

Whisper box script to send the nick (username) with the whisper text. It then erases the text, but not nick (username). You must have one of these functions for each whisper message boxes on your chat. To add more, just copy this function and change all the "1's" to "2's" and so forth. Your must also add more FORM's in BODY of chat to match the new functions you add to the chat. (See Whisper Form below)

function Connect() {
serv=document.settings.serv.value
port=document.settings.port.value
chan=document.settings.chan.value
if (serv && port && chan) {
top.location.href=chatURL+"?serv="+serv+"port="+port+"chan="+chan
}
}

This takes the entries on the connect menu and places them into variables that are used to change chat connections. You can change Servers, Ports, and Channels (rooms). It also checks to see if all 3 lines on the connect menu have something typed in them. If not, it won't connect. This also encodes the file name and reloads the chat. When it reloads, the chat will decode the file name and connect using this information.

function changeChannel() {
room=document.change.channel.options[document.change.channel.selectedIndex].value
if (room == "top") {
window.location="#top"
room=""
}

If the chosen menu item is top, moves page to reference anchor point to use the connect menu.

if (room == "join") {
room=prompt("Enter Room Name:")
}

If the menu item you selected is /JOIN, the you will be prompted to enter a chat room name.

if (room && !null) {
document.settings.chan.value=room
Connect()
}
}

This checks to see that you did enter a chat room name and did not press cancel. It changes the room name in the form at the top of the chat, then goes to the Connect function to make the actual chat room connnection.

function sendPopup() {
text=document.pop.poptext.options[document.pop.poptext.selectedIndex].value

The chosen item from the popup menu is placed in the variable, text.

if (text) {
Chat.addChannelMessage(text)
}
}

If the variable "text" contains something, it sends it out on the chat channel.

function playMusic() {
musicURL=document.music.musicmenu.options[document.music.musicmenu.selectedIndex].value
if (musicURL) {
window.location.href=musicURL
}
}

The musicURL variable take the option value which contains the URL of the music file you wish to play. It checks to see if the musicURL contains text, then the window.location.href loads the file and plays your music selection.

window.status="Room: "+chan
timer=setTimeout('window.status="Basic Chat 6"',10000)

window.status is used to put text in the title bar at the bottom of the page. This will display the current chat room your in for 10 seconds. Then the timer will write the chat title in the status bar.

</SCRIPT>
</HEAD>
<BODY bgcolor=181818 onLoad="setTimeout('document.chat.input.focus()',2000)">
<center>

This ends the JavaScript, end on the HEAD portion, starts the BODY of the chat, sets background page color, onLoad moves the cursor to the chat input line, and starts page centering.

<a name="top"></a>

This names an anchor reference point so the page can be moved to the TOP to use the Connect menu.

<form name="settings">
<input name="serv" bgcolor=black text=gold cursor=gold size=17>
<input name="port" bgcolor=black text=gold cursor=gold size=4>
<input name="chan" bgcolor=black text=gold cursor=gold size=14>
<input type="button" text=gold value="Connect" borderimage=file://ROM/Borders/ButtonBorder2.bif onClick="Connect()">
<script>
document.settings.serv.value=serv
document.settings.port.value=port
document.settings.chan.value=chan
</script>

The form action was removed, and onClick added to keep the audio from cutting off on the webtv plus.

This makes a form on the screen so you can enter the Server, Port and Channel (room) info on it so you can change connections. It also displays the current Server, Port and Channel your presently connected to. You would enter the Server, Port, and channel, then press the Connect button. It then goes to the Connect function and encodes the file name and reloads the chat.

<table<tr>
<td>
<wtvchattranscript height=230 width="100%"><tr>
</table>

Opens table and makes contact with webtv to get the screen. The screen is provided by webtv and displayed on the page in the table. The width is set at 100% which is 544 pixels wide the size of a webtv page. The height is 230 pixels, which leaves room at the top for the connect menu and room at the bottom for the chat input line, whisper boxes, and the popup menu.

<table cellspacing=0 cellpadding=0 border=0><tr>
<td>
<form id="chat">
<input id="input" width="100%" bgcolor=181818 text=gold cursor=gold font=proportional autoactivate nohighlight onChange="addMessage()">

You will notice the onChange, then the actual call for the function to send the text. The onChange is used because the form action cuts the audio off on the webtv plus. This avoids that problem.

Form id is used to anchor the chat text entry line. Otherwise the chat page would not scroll up, but rather down. Very annoying. The action sends the text you enter to the addMessage function so it can be sent when you press the return key. Sets the width to 100%, full screen and sets the text, cursor, and background color of the text input line. Autoactivate means you don't have to press the edit button and nohighlight tells it not to put a yellow box around the input line.

<td>
<input type="button" text=gold value="Whisper" borderimage=file://ROM/Borders/ButtonBorder2.bif onClick="window.open('whisper.panel','whisper')">

This makes a button at the end of the input line. It uses a button stored in the memory of your webtv. The value puts the name, Whisper on the button and the text makes it that color text. The onClick activates the webtv whisper panel. A panel will pop up from the bottom of the screen. The panel has 2 boxes. The one on left has everyone's name in the chat room you are in, and the one on the right allows you to send a private (/msg - one to one) message to them. You would check mark their name on left box and type message on right, then press the button to send your private message. Closes Table.

<input width="1%" bgcolor=181818 text=181818 cursor=181818 border=0 nohighlight>

This is a dummy input line so that the onChange will work properly. It is kept hidden from view by making all the colors the same as the background.

</table>
<table width="100%" cellspacing=0 cellpadding=0 border=0><tr>
<td abswidth="25%">
<form name="msg">
<input name="nick1" width="100%" bgcolor=181818 text=gold cursor=gold font=proportional autoactivate nohighlight value="/msg " onChange="document.msg.nick1.focus(); addMsg1()">

You will notice the onChange and the focus(), then the actual call for the function to send the text. The onChange is used because the form action cuts the audio off on the webtv plus. This avoids that problem. However, the cursor want to jump to the next input line. The focus() brings it back to the line you were at when you pressed the return key.

This is the actual html that draws the small whisper box on the chat screen that contains the /msg and where you enter the nick (username). To add more boxes, copy this and change the "1's" to "2's", like in the JavaScript function above in the JavaScript portion of the chat.

<td abswidth="75%">
<input name="text1" width="100%" bgcolor=181818 text=gold cursor=gold font=proportional autoactivate nohighlight onChange="document.msg.text1.focus(); addMsg1()">
</table>

Again the onChange and focus() is used here to avoid audio cut-off on the WebTV plus.

This draws the larger whisper box that allows you to enter the whisper message. This box will not be highlighted and the text will erase after you press Return key. Again, copy this code and change the "1's" as outlined in the /msg box.

<table><tr>
<td>
<form name="change">
<select name="channel" size=1 onChange="changeChannel()">
<option value="">Change Rooms
<option value="join">/JOIN
<option value="DianesChatRoom">Diane's Chat
<option value="Webtv">Webtv
<option value="New2Webtv">New2Webtv
<option value="top">Server ^ TOP
</select>

When you make a selection from this menu, It will do 1 of 3 things. First, the /JOIN will allow you to enter a room name to change rooms. Second, you can click on a room name already there (you can add your own favorites here), and Lastly, ^ TOP to bring you to the top of the page to use the manual room changer.

<td>
<form name="pop">
<select name="poptext" size=1 onChange="sendPopup()">
<option value="">Popup Messages
<option value="/who">/who
<option value="Hello, how are you?">Hello
<option value="Welcome to the Chat Room">Welcome
<option value="/me thinks Diane's Chats are the BEST!">Diane's Chats
<option value="/me is using Diane's Basic Chat 6">ID
</select>

This is the actual HTML code for the popup menu. The form tags starts it and the name "poptext" is assigned to the menu. The size of "1" refers to the number of options displayed on screen. The onChange sends the form information to the sendPopup() function when you click on an option. This doesn't use the familar "GO" button to activate the menu, it is automatic. Option values that have nothing in them are used as titles and the Script detects them and doesn't send them on the Chat Channel. Text within the option value, like /who, /me, /msg, and normal text can be sent on the Chat Channel. The text after the ">" on the option value line is the actual text which appears in the popup menu.

<td>
<form name="music">
<select name="musicmenu" size=1 onChange="playMusic()">
<option value="">Music Menu
<option value="http://members.tripod.com/~dianedumas/mid/stmusic.mid">ST: First Contact
<option value="http://members.tripod.com/~dianedumas/mid/stdumas.mid">St. Dumas Theme
<option value="http://www.wbr.com/med/ppm/virtualp.ram">Internet Song
</select>
</table>

The onChange sends the form information to the playMusic() function when you click on an option. This works the same way as the popup menu. You can add more audio files by adding more option values and URL's.

</center>
</BODY>
</HTML>

Ends centering, marks end of the body portion of the HTML and ends the HTML.

Copy and Paste Code for Basic Chat 6

Diane Dumas
Ask_Diane@webtv.net

Other Articles in the Series