|
JavaScript - Most Efficient Chat Type?
What is the most efficient type of chat to make?
From what I see online most people use a database and limit the number of results they return, but I noticed that some chats, like google and facebook, for some reason are able to load the full chat and get results almost instantly. How do they do it? I would love to make a replica of a google chat and just redesign the way it looks. If anyone can help me with the javascript/php part of this, that would be great. thanks! Similar TutorialsRight now I am using the following method to show/hide divs containing videos. html Code: <div class="vidPop" id="vidPop">
<div class="vidFrame" id="vidFrame">
<iframe id="Iframe1" src="http://player.vimeo.com/video/xxxxxxx1" width="640" height="360" frameborder="0"></iframe>
<div class="vidClose"><a href="#" onclick="vidPopdown()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div>
</div>
</div>
<div class="vidPop2" id="vidPop2">
<div class="vidFrame2" id="vidFrame2">
<iframe id="Iframe2" src="http://player.vimeo.com/video/xxxxxxx2" width="640" height="360" frameborder="0"></iframe>
<div class="vidClose"><a href="#" onclick="vidPopdown2()"><img src="images/closeban.png" width="52" height="52" alt="close" /></a></div>
</div>
</div>
js Code: function vidPopup() {
var o = document.getElementById('vidPop');
o.style.visibility = 'visible';
o = document.getElementById('vidFrame');
o.style.visibility = 'visible';
}
function vidPopdown() {
var o = document.getElementById('vidPop');
o.style.visibility = 'hidden';
o = document.getElementById('vidFrame');
o.style.visibility = 'hidden';
document.getElementById('Iframe1').src = document.getElementById('Iframe1').src
}
function vidPopup2() {
var o = document.getElementById('vidPop2');
o.style.visibility = 'visible';
o = document.getElementById('vidFrame2');
o.style.visibility = 'visible';
}
function vidPopdown2() {
var o = document.getElementById('vidPop2');
o.style.visibility = 'hidden';
o = document.getElementById('vidFrame2');
o.style.visibility = 'hidden';
document.getElementById('Iframe2').src = document.getElementById('Iframe2').src
}
all of this works just fine, but now I am adding yet another video, and I know that this isn't the best way to go about doing this. I ought to be able to use 1 function and tell it which iframe to load, however I dont really know javascript. Any and all help on this would be greatly appreciated. Right.. I'm still new to javascript so i've just been messing about with some code and came up with a pointless small program i just wanted to know if the code written is efficient? in other words are there other ways that would be more suitable or are certain parts of the code wrong? The script basically does this. 1. prompts you to enter a time interval in the range of 1 second to 10 seconds 2. A small box appears with a random number generated at the time interval the user entered. IF you enter a number lower or higher then in that range it prompts you again to enter a valid number. If you click cancel you automatically get a time interval of 1 second Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>JavaScript</title>
<style type="text/css">
#textbox1{border:1px solid #999;}
#fieldsetid{width:157px; border:1px solid #777; font-family:Verdana; margin: 0 auto 0 auto;}
</style>
<script type="text/javascript">
var count = 0; //Time interval in seconds.
do {
var getNewValue = prompt("please enter in seconds the interval time", secondTime);
var count = getNewValue;
if(getNewValue == null){
var count = 1;
}
if(count > 10){
var secondTime = "please enter a number from 1 to 10";
}
} while(count < 1 || count > 10);
function makeNumNow() {
var MakeNum = Math.random() * 12345678901234567;
var result = Math.round(MakeNum);
document.form1.textbox1.value = result;
}
setInterval("makeNumNow()", count*1000);
</script>
</head>
<body>
<script type="text/javascript">
</script>
<fieldset id="fieldsetid">
<legend>Random Number</legend>
<form name="form1">
<input id="textbox1" type="text" name="textbox" value="" />
</form>
</fieldset>
</body>
</html>
So I made myself this code so I could have a file upload input field, and the option to add more fields. but it got really big, and I have a fixed number of fields, can't quickly change the number I want. here's my javascript: Code: function new_field(id) {
var f = document.getElementById(id);
if(f.style.display == 'none')
f.style.display = 'block';
}
function hide_mais(id) {
var g = document.getElementById(id);
g.style.display = 'none';
}
and the html: Code: <form>
<div id="file_a" style="display:block"><input type="file" /><a href="#" id="link_a" onclick="new_field('file_b');hide_mais('link_a')">mais</a></div>
<div id="file_b" style="display:none"><input type="file" /><a href="#" id="link_b" onclick="new_field('file_c');hide_mais('link_b')">mais</a></div>
<div id="file_c" style="display:none"><input type="file" /><a href="#" id="link_c" onclick="new_field('file_d');hide_mais('link_c')">mais</a></div>
<div id="file_d" style="display:none"><input type="file" /><a href="#" id="link_d" onclick="new_field('file_e');hide_mais('link_d')">mais</a></div>
<div id="file_e" style="display:none"><input type="file" /><a href="#" id="link_e" onclick="new_field('file_f');hide_mais('link_e')">mais</a></div>
<div id="file_f" style="display:none"><input type="file" /><a href="#" id="link_f" onclick="new_field('file_g');hide_mais('link_f')">mais</a></div>
<div id="file_g" style="display:none"><input type="file" /><a href="#" id="link_g" onclick="new_field('file_h');hide_mais('link_g')">mais</a></div>
<div id="file_h" style="display:none"><input type="file" /><a href="#" id="link_h" onclick="new_field('file_i');hide_mais('link_h')">mais</a></div>
<div id="file_i" style="display:none"><input type="file" /><a href="#" id="link_i" onclick="new_field('file_j');hide_mais('link_i')">mais</a></div>
<div id="file_j" style="display:none"><input type="file" /><a href="#" id="link_j" onclick="new_field('file_k');hide_mais('link_j')">mais</a></div>
<div id="file_k" style="display:none"><input type="file" /><a href="#" id="link_k" onclick="new_field('file_l');hide_mais('link_k')">mais</a></div>
<div id="file_l" style="display:none"><input type="file" /><a href="#" id="link_l" onclick="new_field('file_m');hide_mais('link_l')">mais</a></div>
<div id="file_m" style="display:none"><input type="file" /><a href="#" id="link_m" onclick="new_field('file_n');hide_mais('link_m')">mais</a></div>
<div id="file_n" style="display:none"><input type="file" /><a href="#" id="link_n" onclick="new_field('file_o');hide_mais('link_n')">mais</a></div>
<div id="file_o" style="display:none"><input type="file" /><a href="#" id="link_o" onclick="new_field('file_p');hide_mais('link_o')">mais</a></div>
<div id="file_p" style="display:none"><input type="file" /><a href="#" id="link_p" onclick="new_field('file_q');hide_mais('link_p')">mais</a></div>
<div id="file_q" style="display:none"><input type="file" /><a href="#" id="link_q" onclick="new_field('file_r');hide_mais('link_q')">mais</a></div>
<div id="file_r" style="display:none"><input type="file" /><a href="#" id="link_r" onclick="new_field('file_s');hide_mais('link_r')">mais</a></div>
<div id="file_s" style="display:none"><input type="file" /><a href="#" id="link_s" onclick="new_field('file_t');hide_mais('link_s')">mais</a></div>
<div id="file_t" style="display:none"><input type="file" /><a href="#" id="link_t" onclick="new_field('file_u');hide_mais('link_t')">mais</a></div>
<div id="file_u" style="display:none"><input type="file" /><a href="#" id="link_u" onclick="new_field('file_v');hide_mais('link_u')">mais</a></div>
<div id="file_v" style="display:none"><input type="file" /><a href="#" id="link_v" onclick="new_field('file_w');hide_mais('link_v')">mais</a></div>
<div id="file_w" style="display:none"><input type="file" /><a href="#" id="link_w" onclick="new_field('file_x');hide_mais('link_w')">mais</a></div>
<div id="file_x" style="display:none"><input type="file" /><a href="#" id="link_x" onclick="new_field('file_y');hide_mais('link_x')">mais</a></div>
<div id="file_y" style="display:none"><input type="file" /><a href="#" id="link_y" onclick="new_field('file_z');hide_mais('link_y')">mais</a></div>
<div id="file_z" style="display:none"></div>
</form>
any suggestions of a more efficient way to do that? also a button to reset form into initial state, with one field only, without having to refresh the page would be cool. thanks in advance If you go to a Youtube video by Justin Bieber or Rebecca Black, comments are constantly being posted and it seems like the autorefresh for the comments kicks in every half second. I don't plan on having millions of users viewing my page, but still, wouldn't having every user make a [mysql] request to the server every half second really take a toll on the server (especially since I don't plan to ever have the resources that Youtube has)? Facebook also seems to have instantaneous auto-refreshes, be it in comment boxes or their chat interface. So what would be the best method to implement a near-instantaneous autorefresh system with minimal resource usage? Hi all, I've been trying to build a form with dynamic checkboxes. I'd like to have a master 'select none' checkbox in a few form fields which has 2 key functions:- 1) clearing all field boxes the user may have entered before opting to select none 2) disabling all field options to make it impossible for the user to tick both 'none' and other options. This 'select none' checkbox should be ticked by default, so when the user unchecks it, the rest of the field options light up. I'm a complete novice but I have it working ok having stitched a few pieces of code I've found together, however I don't think it's very efficient. I have had to duplicate both bits of the javascript to make it work, changing only the function names in the <head> area ('Uncheck' and 'Uncheck2') and the class variables in the form in the <body> area ('fruit_child' and 'veg_child'). As this form will have several more fields eventually, I'm looking for a better way to do this while maintaining the functionality. Ive read bits about object-orientated programming which may be what I'm looking for to make this more efficient, but I'm not sure how to implement it in this example. Can a more experienced coder please help? Kind thanks, Fleef Code: <head>
<SCRIPT LANGUAGE="JavaScript">
// Check_ctr: clears all when 'none' box ticked -->
function Uncheck(chk)
{
if(document.myform.Check_ctr.checked==true){
for (i = 0; i < chk.length; i++)
chk[i].checked = false ;
}
}
// End -->
</script>
<SCRIPT LANGUAGE="JavaScript">
// Check_ctr: clears all when 'none' box ticked -->
function Uncheck2(chk_veg)
{
if(document.myform.Check_ctr_veg.checked==true){
for (i = 0; i < chk_veg.length; i++)
chk_veg[i].checked = false ;
}
}
// End -->
</script>
</head>
<body>
<form name="myform" method="post">
<input type="checkbox" id="none_fruit" name="Check_ctr" value="yes"
onClick="Uncheck(document.myform.fruit)" checked><b>None</b><br>
<input type="checkbox" name="fruit" value="1" class="fruit_child" disabled="true">1<br>
<input type="checkbox" name="fruit" value="2" class="fruit_child" disabled="true">2<br>
<input type="checkbox" name="fruit" value="3" class="fruit_child" disabled="true">3<br>
<input type="checkbox" name="fruit" value="4" class="fruit_child" disabled="true">4<br>
<input type="checkbox" name="fruit" value="5" class="fruit_child" disabled="true">5<br>
<script>
// disables options when 'none' ticked -->
$(function(){
$("#none_fruit").click ( function() {
if ( !$(this).is ( ":checked" ) )
{
$(".fruit_child").removeAttr ( "disabled" );
}
else
{
$(".fruit_child").attr ( "disabled" , true );
}
});
});</script>
<br><br><br>
<input type="checkbox" id="none_veg" name="Check_ctr_veg" value="yes"
onClick="Uncheck2(document.myform.veg)" checked><b>None</b><br>
<input type="checkbox" name="veg" value="1" class="veg_child" disabled="true">1<br>
<input type="checkbox" name="veg" value="2" class="veg_child" disabled="true">2<br>
<input type="checkbox" name="veg" value="3" class="veg_child" disabled="true">3<br>
<input type="checkbox" name="veg" value="4" class="veg_child" disabled="true">4<br>
<input type="checkbox" name="veg" value="5" class="veg_child" disabled="true">5<br>
<script>
// disables options when 'none' ticked -->
$(function(){
$("#none_veg").click ( function() {
if ( !$(this).is ( ":checked" ) )
{
$(".veg_child").removeAttr ( "disabled" );
}
else
{
$(".veg_child").attr ( "disabled" , true );
}
});
});</script>
</form>
Hey guys. Didnt know what forum to put this in, but i figured i would put it here. Basically im making an ajax chat client. I dont know if anyone here as ever looked at googles chat client code, but if anyone knows how to make one function the same way as it, I would love if you would help me figure it out. I tried making a chat client, but it ended up being slow, buggy, and you couldnt select text because the innerhtml was refresshing so much. So how can I make a good chat client like googles? Thanks! Hello. I'm currently playing with some projects, and one of them is creating a simple 2D chat, where users have an avatar, that they can move around and chat with. I want to do this with PHP and jQuery. Question here is, if I set it to auto-update the chat every 1 second, and get the new values in the database (if user has moved position), will it suck up too much bandwidth if there's 5 - 30 users online at the same time? I know there's other better ways of creating a 2D chat, but I'm just doing this for practice of my programming skills. So, I need help with a script that swaps out chatango chats and allows you to expand/shrink them. Here's the source: Code: <div id="chatWrap">
<div id="cbox"></div>
<div id="ccon">
<button onclick="switchChat();">Switch to <strong id="cnext">Chat Title</strong></button>
<button id="csize" onclick="resizeChat();">Expand</button>
</div>
</div><br />
<div id="chatNotice" style="display:none;">Note: When you switch chats, the expand/shrink button stops working until you reload the page. Hopefully this will be fixed soon. <a href="javascript:void(0);" onclick="javascript:get('chatNotice').style.display='none';">[Hide this Notice]</a></div>
<script type="text/javascript"><!-- // --><![CDATA[
var chats = [];
chats[0] = ['Forums Chat','dh-forums-chat', 1249524788838];
chats[1] = ['Main Chat', 'dh-chat', 1247103393344];
var chat = {
'opt': 'b=60&f=50&l=999999&q=999999&r=100&s=1',
'ref': 'www.dubhappy.com',
'cur': 0,
'delay': 1.5,
'params': [['wmode','transparent'] , ['allowscriptaccess','always'] , ['allownetworking','internal']]
}
var chatState = 0;
var chatStates = [];
chatStates[0] = ['Expand', '300px'];
chatStates[1] = ['Shrink', '500px'];
var eles=[''];
function get(id){eles[id]=eles[id]||document.getElementById(id)||false;return eles[id];}
function cE(e){return document.createElement(e);}
function cT(s){return document.createTextNode(s);}
var ie = false;
function aO(d, t, src, p, id ){
var o, e, i;
if (!ie){ o = cE('object');o.data = src; }
else { o = cE('embed'); o.src = src; }
o.id = id;
if (!ie){ p.push( ['movie', src] ); }
if ( typeof(id) === 'String' ){o.id = id;}
o.type = t;
for(i = 0; i < p.length; i++){
e = cE('param');
e.name = p[i][0];
e.value = p[i][1];
o.appendChild(e);
}
d.appendChild(o);
}
function switchChat(){
var x = chat.cur;
chat.cur = (x + 1) % chats.length;
var c = chats[x];
var src = 'http://st.chatango.com/flash/group.swf?ref=' + chat.ref + '&gn=' + c[1] + '.chatango.com&cid=' + c[2] + '&' + chat.opt;
get('cbox').innerHTML = '';
aO( get('cbox'), 'application/x-shockwave-flash', src, chat.params, 'chat' );
get('ccon').style.display = 'block'; // qfix
get('cnext').innerHTML = chats[chat.cur][0];
get('chat').style.height = chatStates[chatState][1];
get('csize').innerHTML = chatStates[chatState][0];
}
function resizeChat(){
if(chatState == 0)
chatState = 1;
else
chatState = 0;
get('chat').style.height = chatStates[chatState][1];
get('csize').innerHTML = chatStates[chatState][0];
}
function chatInit(){
if (navigator.userAgent.indexOf('MSIE') !== -1){ie = true;}
if ( chat.delay <= 0 ){
switchChat();
} else {
var i = cE('img');
i.src = 'http://dubhappy.com/ajax-loader.gif';
get('cbox').appendChild(i);
get('cbox').appendChild( cT(' Loading Chat...') );
window.clk = setTimeout( function(){switchChat(); get('chatNotice').style.display = '';}, chat.delay * 1000 );
}
delete chatInit;
}
chatInit();
//]]></script>
There's also some CSS: Code: /* Chat Styling */
#chatWrap{
width: 235px;
margin: 0 auto;
}
#chat{
height: 300px;
width: 235px;
}
#ccon{display: none;}
#ccon a{
text-decoration: none;
display: block;
}
This is implemented at http://forums.dubhappy.com/ As you can see by the notice under the chatbox, after swapping out the chats, the expand/shrink button no longer works until you reload the page. Do you know how to fix this? I've spent way too much time trying to figure out why this was happening. Much thanks if you manage to figure out the problem. Hello, I am very new to javascript, and I'm having a hard time finding a way to easily add some chat code to our website without manually adding it to every page. Here's the deal: I need to add this code to every page of our website: Code: <div id="cihfi9" style="z-index:100;position:absolute;"></div><div id="schfi9" style="display:inline;float:right;"></div><div id="sdhfi9" style="display:none"></div><script type="text/javascript">var sehfi9=document.createElement("script");sehfi9.type="text/javascript";var sehfi9s=(location.protocol.indexOf("https")==0?"https://secure.providesupport.com/image":"http://image.providesupport.com")+"/js/mrcuser/safe-standard.js?ps_h=hfi9\u0026ps_t="+new Date().getTime();setTimeout("sehfi9.src=sehfi9s;document.getElementById('sdhfi9').appendChild(sehfi9)",1)</script><noscript><div style="display:inline"><a href="http://www.providesupport.com?messenger=mrcuser">Live Support</a></div></noscript>
I would like the chat icon to appear at the top of each page next to our main menu links. Our main menu links are called from one javascript file. I would like to figure out a way to add this code to the javascript file, so I only have to add it once. The javascript file only has one line of code: document.write(all of our main menu links). Is there a way to add the chat code to the main menu javascript file so that the chat icon will appear on every page, or is this impossible? Thanks for your help! I have developed one to one chat in asp.net. Now I wanted a gmail chat like feature in it. In left side of page, a list of online users should be available. When I click on a user, a new div should popup on right bottom corner with close and minimise buttons. When I click on another user , a second div should popup on right bottom corner of page but left to the first popup div. I want popping up of divs dynamically. The no of clicked users should decide the no of popped up divs. Also, for each division there should be a separate division ( inside the popped division ) whose innerhtml value is my chat text. And if three divs are popped up and if I close the second one, the third should get attach to first popup. Hope, you'll understand my requirements, and will provide a suitable code in javascript. I want to make a chat-box so people can log in under a nickname and talk to eachother, anyone have any idea how i can go about doing this?
Hi, I have a problem with max. memory usage, and I wonder what pingtime in a chat program is for, I imagine its to refresh to see if person is still there, but not sure, if anybody can explain. I have this on all pages where the chat is: serversession=1&pingtimes=15 I wonder if it makes any difference to change the pingtime, thanks Im not sure what type of script it is, but another site i saw had a webcam chat room that was a swf file. I know that flash, but where can i get a script for a Webcam chat room to set up on my site. Thanks Does anyone know of a good tutorial on how to make a good node.js chat? I need a chat that a decent VPS server can handle ~100 simultaneous users with and apparently I should be using node.js but have no experience with it. What should I look at? Thanks! Hey guys. I made a chat client today (my first one and it's pretty sweet so far) I have a speed problem though http://xonicgames.com/hudson/chat.php Once there are ~20+ posts it starts getting slow (at least on my connection) It does an ajax request every 500 seconds (dont know if that should be slowed down or not) What can I do to speed it up? Thanks I have got a script for chat room from hotscripts however the author has left the site and I am not able to contact him. So if anyone here can guide me a bit? It is basically a php/ajax chat room script using javascript. It runs fine here is a demo: Code: http://sharinganuser.freeiz.com/Test/chat/ i have set it up properly and it is even using mysql database. My question is that I want to make log of what ever the chat is happening (even the private ones) as I am admin. I am very good at php and understand what he has done in php but I when it comes to javascript i am not a person for it. So if anyone can help me with javascript? Cause when I see the msg send button source code it shows onclick is javascript:void(0) means it is using a java script. And there are total of 4 js files used: Code: http://sharinganuser.freeiz.com/Test/chat/js/ Note: log saved in database only remains for 15 minutes or somewhat like that cause i checked the data the old conversation was gone so I am now trying to use PHP fwrite code. i know how to write and implement it but again it has to go in some js file where the send button is related and I am not sure which file and exactly where. So any help would be appreciated. Regards, Hi, Im not sure if this is in the right place, but anyway, what im trying to achieve is turning an x7 chat application into a paid to chat service, i know it can be done but im just not sure how to code it, what i was wanting to do is have an earnings bar that updates itself when a member types a line of chat and credits that user with the current line pot ie 0.01 per line written on the chat (example) Users current earnings 0.0001c current written line pot 0.0003 Hope this makes sense Can anyone help me please Thanks in advance Baz Sorry if this post is very noobish, its because I am a noob. Ok, so I have a forum with Proboards and want to add a chat using the "headers/footers" but as Ive been having some trouble on my forum, I need the chat to have an admin panel (ban, warn, even see IP's if possible etc). I also need it to be streaming, not a refresh chat room. I cant seem to find a chat with this function anywhere, can anyone help? P.S I know you can have AddonChat with Proboards but that does not have the admin tools that I need and I cant afford to pay for these priveleges. If this is not possible, does anyone know any codes I could use with my AddonChat to at least give me some kind of admin control? Cheers xx Here is my website... www.thepriceoflust.com You need to log into my website as a user... User Name is: supramaniac Password is: lakeella On the top bar you can click on the chat tab... Enter into one of the chat rooms... As you will see the chat room window turns into like its own web browser and displays a copy of my index page... The chat rooms used to do that before and someone fixed it and said that my permissions were wrong on my installation folder. I don't know if that is right or not. Why would it go back to doing the same thing. Anyway does anybody know how to fix this issue?
|
|||||||