Reattaching eventhandlers after ajax requests produces ugly and very odd code. It’s better you use jQuery .live()-event-attaching which attaches automatically the handler to all new elements with the same selector. In the current version of jQuery 1.7 the live()-method is replaced by on() that combines all possible event-attaching features of jQuery.
If you have ever tried to geocode with google maps you have perhaps noticed that you can’t easy pass more data to the callback function. And geocoding on an array of addresses won’t work too, because you get always the result for the last entry of your array.
The classic example for websockets is a chat. This chat example has only 200 lines of code (excl. the Websocket class), is really easy to understand and customizable.
easy if you know how …
myarray.sort(function(a, b){ return a.toLowerCase() > b.toLowerCase(); }); |
In “Google Closure Compiler with PHP” i described how you can use the compiler online via http. Now i will show how you do it local on your server with the java command line application …
in windows how to do that… i am using xampp and java is installed on C:Program FilesJavajdk1.6.0_18bin
in windows how to do that… i am using xampp and java is installed on C:Program FilesJavajdk1.6.0_18bin
HTML5 WebSockets makes it possible to open a persistent connection to a server within a web-browser via javascript.
Firefox can’t open the connection for the same reason Chrome 6 dev can’t open the connection. You have implemented version -75 of the protocol (which Safari 5 and Chrome 5 use), while Firefox and Chrome 6 dev support version -76.
Thanks zcorpan for your advice … i have recoded my class, now it works with the new Firefox 4 Beta too.
it was very interesting to read.
I want to quote your post in my blog. It can?
And you et an account on Twitter?
Hey, nice introduction to websockets thanks 
I have successfully implemented some examples but they only work from localhost.
How can i tell apache/php to allow socket connections beyond localhost?
I don’t understand the need for the eval:
[ eval('var data = ' + msg.data + ';'); ]
why can’t you just do a real var data = msg.data?
msg.data contains JSON as string … with eval i convert it to a real javascript object
Hi skybinary,
Please ensure that the socket is not just listening for localhost calls.
e.g., let’s say you are working with port 8181. Then if you type within a terminal ‘netstat -an | grep LISTEN’ and
you see something like this ’127.0.0.1:8181′ that’s the root of your problem.
So if you want to permit any incoming connection you should do something like this:
$webSocket = new WebSocketServer(“0.0.0.0″, 8181, ‘process’);
opening two windows with the example doesn’t seem to work.
The first Window works but the second one not.
Is it required and possible to set any parameter for the concerned window?
After reloading both Browser-Windows it works and I get both cursers shown while the active one is correctly changeable while the other one is passive.
In a list on the pic the IPs (surely the same) and the cursors are shown.
Question is:
1) how are the windows divided by the script
2) why both windows had to be reloaded and why in the beginning just reloading the 2nd window didn’t show any cursor?
Hi David, which browser (+ version) do you use? If you try with one chrome-window and one chrome inkognito window it should work … or two different browsers.
Hello, very thanks you for this! work!
But i’m too trying PHP WebSocket(http://code.google.com/p/phpwebsocket/) simple example(Chat) but don’t work and i’m get error: Error: INVALID_STATE_ERR: DOM Exception 11
And status is: WebSocket – status 0
Maybe know how to fix this ?
Thanks for this and Good Luck!
Thanks Ldup for your question. I have nothing to do with this project, but i can see that the maintainer is working on the project and he usually answers questions very quick.
Hi, i have a problem with a scripts that is almost the same as yours. The eval function of the very first message received from the server gives me an Unexpected token ILLEGAL error. But all the other messages after the first one work great. When I read the first message with a console.log(msg.data) there is absolutely nothing strange in this message. Is there something special with the first message sent by the server?
Hi,
i have the same problem as Yves : the first message sent by the server raise always a onerror event on the client, the others messages works fine after… really strange… (chrome version 8.0.552.224)
Thank you
Thanks for the comments, i can reproduce the problem and a quickfix is to wrap the eval in a try/catch block. i will look into the problem later, there seems to be a “hidden” char in the response …
Do you plan to ad “wss” feature?
this is the only option working for me behind firewall, simple “ws” fail to connect
an error is occurring on the server can not answer the socket.
php_exif.dll disabled the dll file that was giving error zend parameter in the library.
I am using windows xp and windowdows 7 the same error.
I’m from Brazil my net is networked to another pc
image the error : http://img218.imageshack.us/i/imagemyj.gif/
solve the problems agora ta All ok
thanks for posting can clear my doubts valew old ^ ^
thanks for posting this beautiful work.
is being dealt a new server database that connects with
javascript
his name is jwebsocket a very good api
to be compatible with Internet Explorer 6,7,8,9.
How does this work? From the little I know about php the script gets called each time a browser opens an page. I understand that the server.php calls run so it doesn’t return like simple php scripts, but why aren’t there server instances for every user calling this script? Is it that the “require_once” makes only the first call of the script work and the other silently fail so there is only one server object? I don’t understand why there are not many WebSocketServer objects with each having only 1 client.
(Sorry for my bad english, I’m out of training)
that is not a”typical” php-script which is opened in the browser via http … its a command line script, you can run it for example under linux oder mac osx via “php -q server.php” (if php is installed on the computer) … in this script is a endless-loop, so it runs until it is stopped with Crtl-C … hope that helps
I have problem with this function – private function wrap($msg=”") { return chr(0).$msg.chr(255); }
I get all info and at the end is this char – ÿ which is chr(255).
Therefore at the client side I get error – “Invalid char”. If I remove “chr(255)” char “ÿ” is removed, but client side doesn’t work either.
Hey, i’m tryng to get this to work.
It still doesnt, and the reason is that crappy ‘hidden character’ that prevents json to be effectively interpreted, thus not appearing in the reply itself.
here is the discovery:
http://stackoverflow.com/questions/4880273/character-in-front-of-websocket-message
But not the solution.I’m still looking for a good one to implement, or a way to get rid of that piece.
Found a solution: by js, just use the replace function of javascript example, assume msg is the string returned by websocket.message function
msg = $.parseJSON(msg.data.replace(”, ”));
or, without jquery:
msg = JSON.parse(msg.data.replace(”, ”));
Hope someone will find this helpful to someone.
Sorry, but the ascii code got interpreted.
Between the first ” in the code, insert
0
without the space between, it will work, giving back your Json content.
Fixed memory leak on message quantity:
Class WebsocketChatMessage {
….
// Added destructor
public function __destruct() {
echo “menya stiraut ” . $this->text . “n”;
unset($this->text);
unset($this->username);
unset($this->timestamp);
}
// End of added destructor
….
}
and in
Class WebsocketChat {
…
//added message limit
private $maxmessage = 10;
//End of changes in variables
….
if ($msg->action == ‘chat’) {
$text = filter_var($msg->text, FILTER_SANITIZE_STRING);
$lastMessage = new WebsocketChatMessage($user->data['username'], $text . ” memory state ” . memory_get_usage(), time());
$user->data['message'][] = $this->messages[] = &$lastMessage;
//Begin of cleaning Checking if messages is too much
if (count($this->messages) > $this->maxmessage) {
//Cleaning old messages
array_splice($this->messages, 0, 1);
array_splice($user->data['message'], 0, 1);
}
//End of Cleaning
}
}
}
now the memory usage is clean and correct the script will live!
now who can help me with wss?
i mean SSL for web stocket workaround.
I got ‘StartListening: Unable to bind socket – Address already in use.’ error when php -q server.php command execute in terminal.So web socket is not working.
Please give me direction how can i test web socket properly working or not.
Thank You
How much better is this than Ajax JSON callbacks?
How much better is this than Ajax JSON callbacks?
Could you please update the code to support the new hybi-10 draft?
Could you please update the code to support the new hybi-10 draft?
function hybi_decode($data){
$bytes = $data;
$data_length = “”;
$mask = “”;
$coded_data = “” ;
$decoded_data = “”;
$data_length = $bytes[1] & 127;
if($data_length === 126){
$mask = substr($bytes, 4, 8);
$coded_data = substr($bytes, 8);
}else if($data_length === 127){
$mask = substr($bytes, 10, 14);
$coded_data = substr($bytes, 14);
}else{
$mask = substr($bytes, 2, 6);
$coded_data = substr($bytes, 6);
}
for($i=0;$i<strlen($coded_data);$i++){
$decoded_data .= $coded_data[$i] ^ $mask[$i%4];
}
return $decoded_data;
}
function hybi_encode($data)
{
$frame = Array();
$encoded = "";
$frame[0] = 0×81;
$data_length = strlen($data); if($data_length > 8;
$frame[3] = $data_length & 0xFF;
} for($i=0;$i<sizeof($frame);$i++){
$encoded .= chr($frame[$i]);
} $encoded .= $data;
return $encoded;
}
function hybi_decode($data){
$bytes = $data;
$data_length = “”;
$mask = “”;
$coded_data = “” ;
$decoded_data = “”;
$data_length = $bytes[1] & 127;
if($data_length === 126){
$mask = substr($bytes, 4, 8);
$coded_data = substr($bytes, 8);
}else if($data_length === 127){
$mask = substr($bytes, 10, 14);
$coded_data = substr($bytes, 14);
}else{
$mask = substr($bytes, 2, 6);
$coded_data = substr($bytes, 6);
}
for($i=0;$i<strlen($coded_data);$i++){
$decoded_data .= $coded_data[$i] ^ $mask[$i%4];
}
return $decoded_data;
}
function hybi_encode($data)
{
$frame = Array();
$encoded = "";
$frame[0] = 0×81;
$data_length = strlen($data); if($data_length > 8;
$frame[3] = $data_length & 0xFF;
} for($i=0;$i<sizeof($frame);$i++){
$encoded .= chr($frame[$i]);
} $encoded .= $data;
return $encoded;
}
Hi
Please anyone who knows post how to get the “New URL for Example” working.
I love to see working things before troubleshooting it on my pc later.
I love websockets!
matt
Hi
Please anyone who knows post how to get the “New URL for Example” working.
I love to see working things before troubleshooting it on my pc later.
I love websockets!
matt
source code not showing
“rather good than”? Go lean some basic english, fucktard.
Der SproutCore Erfinder Charles Jolley verlässt Apple und gründet ein Unternehmen das sich mit der Entwicklung neuer Rich-Web Applikationen auf HTML5-basis beschäftigen wird.
Selbst wenn man keine klassische Volltext-Suche auf der Seite hat kann man mit dem Site Search Tracking von Analytics arbeiten.
More …
Eine wirklich simple Idee … mittels der Farbunterscheidung zwischen “visited”- bzw. “nicht visited”-Links kann man die Browser-History eines Benutzers stehlen. Man braucht allerdings eine Linkliste die man vergleichen kann, also ist es kein richtiges stehlen. Im Detail funktioniert es so das man mittels Javascript Links erzeugt und vergleicht in welcher Farbe sie dargestellt werden. So kann man zB feststellen ob der Benutzer vorher schon bei den Konkurrenten vorbeigeschaut hat.
Mein Beispiel-Script kann man unter folgender Adresse finden:
http://bohuco.net/dev/history/
(via dicabrio)
Today Google released their new Closure Compiler, you can use it to optimize and minify your javascripts.
You can find more details on using Google Closure API with ASP.NET at http://www.bloggingdeveloper.com/post/C-Wrapper-for-Google-Closure-Compiler-Compressing-Javascript-Files-on-the-fly-with-ASPNET-and-Closure-Compiler.aspx.
It features a C# wrapper for the tool.
The exactly same article here: http://blog.silex.co.in/2009/11/09/google-closure-compiler-with-php/
IMHO is my short article not worthy to be stolen … but … who cares
FYI, here’s a class that wraps the compiler and caches locally on disk so you can have a convenient debug/development cycle without calling the compiler for every request: http://code.google.com/p/php-closure/
Does someone have a benchmark site in order to compare performances for different minified scripts ?
thanks for the quick code post
Über den Lagesensor kann man ermitteln ob das iPhone gerade hochkant oder horizontal gehalten wird. Safari am iPhone besitzt dazu ein spezielles window-attribut. In window.orientation steht entweder 0 (für vertikal) oder +/-90 wenn das iPhone quer gehalten wird, je nachdem welche Richtung es gedreht wurde.
Um auf eine Änderung reagieren zu können gibt es den Event-Handler onorientationchange den man zum Beispiel im BODY-Tag verwenden kann:
<body onorientationchange="alert(window.orientation);"></body> |
Google hat diese Woche einen Javascript Debugger/Profiler für Chrome veröffentlicht, bisher waren ja nur die WebKit-Tools enthalten.
via golem
My favorite feature in firebug is console.log but it has one problem, you have to remove all calls from source code before going live else your visitors will get many many javascript errors. But there is a really simple solution for that problem, getfirebug.com hosts a javascript which creates a fallback console object if firebug is not installed.
[sourcecode language="javascript"]
[/sourcecode]
So, now we are on the save side and can play around with the console object. The usually most used method is “log”, it simply prints something to the console. Strings, Arrays, Objects, Dom, XML … everything works, log can also print more than one variable at once.
[sourcecode language="javascript"]
console.log(‘A String’, ['an','array'], document.getElementById(‘domObject’));
[/sourcecode]
Console can write messages with a specific type, so you can print errors and warnings to your console.
[sourcecode language="javascript"]
console.error(‘an error’);
console.warn(‘a warning’);
[/sourcecode]
Outline object members in console with the ‘dir’ method.
[sourcecode language="javascript"]
console.dir({nice:’to’, see:’that’, cool:function(){ alert(‘cool’); }});
[/sourcecode]
If you wanna see all cool features, now and live, there is an example page on bohuco.net/code:
http://bohuco.net/code/firebug-logging/
More infos:
http://getfirebug.com/console.html
Google Code – Fun with Firebug
I normally just create the dummy object myself.
If you have a variable that tells the script what mode you’re in then it all becomes easier.
EG
var mode = ‘dev’;
if(mode != ‘dev’){
var console = {};
console.log = function(text){
//do nothing special
return text;
}
}
You can use this to override whatever console features you normally use. Personally i just use console.log()
I hope that the Firebug-Guys keept this file up to date, and if they add a function to console they should add it also to this fallback file … so i don’t have to think: “which method did i use in this project”.
gameQuery, a new jQuery plugin, provides functions for creating browser games. In this early stage gameQuery supports a main-loop, game area (playground), sprites with CSS animations and sounds (not tried yet).
I have played around with gameQuery and here is the result. A simple Pong clone that should work in IE6/7, Chrome and Firefox.
The current gameQuery version is 0.2.5 and so there are some points for improvement. Every sprite needs an animation and every animation needs an image even if you don’t need it. Playground is always position:absolute and it has a black border. Only little things that you can override.
The game is great! it’s nice to see what you’ve done with my small plugin . I’ve never thought about having a sprite without an image associated to it 
I will to add this possibility to the plugin as soon as I can and make the playground more customizable has well!
You are right, a problem that usually only occur when you start to develop a game but it is very confusing when you have to find that problem.
Good job and thanks for sharing.
FYI: after pressing q or a keys, most of the time my firefox thinks I’m trying to execute a search on the page and thus prevents the next keypress to reach the document. Explicitly focusing an element on the page at each keypress and/or interrupting keypress propagation are possible fixes.
cheers
404 – NOT FOUND -
DOESNT LOOK LIKE THE GAME IS UP ANYMORE
game is back again …
http://bohuco.net/testing/gamequery/pong.html
simple nibbles keyboard controls …
http://bohuco.net/testing/gamequery/test01.html
Bin schon seit l
Uhhh, thank you for that tip … i will fix that in the next days.
Die definitive Link-Sammlung:
http://www.crockford.com/javascript/private.html
http://mckoss.com/jscript/object.htm
Wichtig: Private Variablen können nicht aus den public Methoden gelesen werden sondern nur aus den private-Methoden … also MUSS es für die privaten Variablen Setter- und Getter-Methoden geben. Und, die privaten Methoden werden NICHT mit “this” aufgerufen:
[sourcecode language='javascript']
var test = function() {
// private variable
var status = 1;
// private method
var getStatus = function() {
return status;
}
return {
publicMethod: function() {
var status = getStatus(); // NOT this.getStatus();
}
}
}
[/sourcecode]
facelift (FLIR) ist ein Javascript/PHP-Lösung die on-the-fly Bilder mit Schriftzügen in den gewünschten Schriften erzeugt. FLIR benötigt im Gegensatz zu sIFR, kein Flash. Die Bilder werden serverseitig mittels PHP (GD-Library) erzeugt und dann automatisch in die Seite eingefügt.
Beim CSSGirl wird ein neuer PNG Fix vorgestellt, ich werd ihn nicht gleich ausprobieren aber er scheint wohl besser zu sein als das was es bisher gegeben hat. Es wird SuperSlight mit dem neuen Unit PNG Fix verglichen und jeder hat seine Vor- und Nachteile aber der Unit PNG Fix hat dann doch die Nase vorn.
Firecookie – Lässig, alle aktuellen Cookies einfach in einem Firebug-Tab bearbeiten.
FirePHP – PHP Debug-Messages und Exceptions in Firebug anzeigen.
Ich hab heut ein neues ZwischenRelease von SongZwa hochgeladen. Leider gibts immer noch keine Userverwaltung und damit auch keine Playlisten die über eine Session hinaus bestehen bleiben, aber einige andere Sachen hab ich verbessert.
Die größten Änderungen hat es im Player gegeben. Alle Elemente sehen jetzt grafisch gleich aus, die Elapsed-Time-Bar hab ich mit dem Song-Titel kombiniert und alles wurde etwas hin-/hergeschoben und schaut jetzt hoffentlich besser aus.
Die Kommunikation zwischen YouTube-Player und meinem Javascript-Interface sollte jetzt besser funktionieren. Wenn man also im YouTube-Player lauter dreht sollte sich das auch oben in der Lautstärkeanzeige ändern und umgekehrt.
Die drei Interface-Blöcke Search, Playlist und Video lassen sich jetzt ausblenden. Das braucht genau keiner außer rbrthmr weil er sich immer Sachen anhört die ganz grausliche Videos haben … also viel Spaß jetzt beim ausblenden.
Videos die von YouTube als NotEmbedable markiert sind werden jetzt ausgegraut angezeigt. Man kann dennoch draufklicken und man wird gefragt ob man das Video direkt bei YouTube ansehen will.
Wieder mal ein Feature das sicher keiner brauch. Aber wenn dich eine nette Grafikerin fragt, kannst auch nicht einfach “so a schaaas” sagen.
Selection Background Color via CSS ändern
Und gleich noch einer … den werd ich demnext sorgar noch wo verwenden müssen, man kann ja nicht erwarten das die User die Browserfunktionen nützen können ???
Textgröße mittels Javascript ändern
Gleich mal merken für die Zukunft …
More Infos: dustindiaz.com, lixo.org, jeffreysambells.com
Panik and 
m3ta, 
Elbriga, 
Paromatt, and 19 others are discussing. 
dave, 
Yansky, and 
Nate, and 4 others are discussing. 
var myNameSpace = function NameSpace() {
// private methods/properties
var privProp = 'test string';
function privMethod1(var1) {
alert('method: privMethod1');
}
function privMethod2(var1) {
alert(privProp);
}
// public methods/properties
return {
pubMethod1 : function(var1) {
alert('method: pubMethod1');
},
pubMethod2 : function(var2) {
privMethod1();
},
pubVar1 : 'a string'
}
}();
myNameSpace.pubMethod1();
myNameSpace.pubMethod2();
alert( myNameSpace.pubVar1 );
Anonymus namespace with method export:
(function(){
function $(id) {
return document.getElementById(id);
}
function test(id) {
alert($(id).innerHTML);
}
window['mytest'] = test;
})();
Dean Edwards hat eine neue Beta-Version seiner Javascript Library veröffentlicht.
Richtig es gibt sie nicht, die trim() Funktion (mid() für M$ fans). Und auch einige andere Funktionen die man in PHP oft verwendet, gibt’s nicht. Aber jetzt!
Beispiele: wordwrap, explode, stripslashes, trim
[UPDATE]
Dieses ImageFlow schaut doch irgendwie nach Apple aus, oder? Na ja, ich schätze das ich es demnächst wo einbauen darf, hoffentlich gibt’s das Ding dann schon als jquery Plugin. (via Basic Thinking Blog)
in windows how to do that… i am using xampp and java is installed on C:Program FilesJavajdk1.6.0_18bin