How to create web chat?

How to create a "Chat With The Site Owner" widget?

• What is the best way for a web developer to create a custom "chat with the site owner" widget? A client wants an "ASK THE SITE OWNER" feature on his website. It would be similar to a Google Talk "chatback widget" on a client's website, allowing visitors to see if the owner has logged on, and to send chat messages. But I can't use the official GTalk widget, though, because it's all supposed to have a customized look and feel. I have started exploring solutions involving Node.js and similar libraries that will let a program talk to XMPP chat services. But I am mostly a front-end programmer and do not have much experience with HTTP headers and stuff like that. I'd like to learn more, and have been working through tutorials, but I wonder what method you might advise for setting up something simple like this without getting too lose.

• Answer:

  I wrote something like this for fun a while back while trying to mimic Olark (but with long polling and no IM client integration). Setting up chat between an operator and a site visitor is actually quite straightforward if you're using node.js and socket.io. Setting it up as a SaaS business model in which you have to support multiple sites/companies, or sites per companies, extra operators and with live page tracking is nontrivial. I imagine adding IM client integration complicates it even more. If I was your employer and was also hosting the sites you design then I would go ahead and try to roll out our own system that we could offer as an add-on to all of our clients. Keep in mind, creating your own system is going to cost quite a bit more than the $15/month Olark charges, unless you're getting paid $.10/hour =). For shared hosting setups there are PHP options out there that may not be as real-time nor as nice-looking on the backend but those still might work for the particular client you mention. Here's some code I just whipped up of a basic, one operator, one site server (node.js):var io = require('socket.io').listen(8080);var operator = {};operator.socket = null;operator.sockets = [];io.sockets.on('connection', function (socket) { socket.on("operator", function(key,fn){ // operator has connected // authenticate operator operator.socket = socket; fn("success"); }); socket.on("client", function(name, fn){ //client has connected //add this socket to our operator's sockets operator.sockets.push(socket); fn("success"); }); socket.on('message', function(msg, fn){ //am I the operator or client //operator code /** msg is object with keys: {to_client, msg} for operator **/ if(operator.socket.id == socket.id){ for(var i=0;i var s = operator.sockets[i]; if(msg.to_client==s.id){ s.emit("message",msg.msg); //send message to client } } }else{ //client code, send msg to operator operator.socket.emit("message",socket.id, msg); } //callback fn(msg); }); socket.on('disconnect', function () { if(socket.id != operator.id){ console.log("REMOVE SOCKET FROM OPERATOR ARRAY"); } });});From the browser, clients connect with socket.emit("client") and your operator connects with socket.emit("operator"). Obviously, you need some sort of authentication for the operator. Here is the JS I pasted into Chrome's console to test out the server-side script shown above: //be sure to include socket.io.js (I just pasted the file into the console before running the below code) //Connect as the operator //connect to the server, register as operator var socket = io.connect("http://localhost:8080"); socket.on('connect', function () { socket.emit('operator', 'someauthkey', function (data) { console.log(data); //callback function }); }); //register your receive message callback socket.on("message", function(client, msg){ console.log("client id " +client+" sent message: " + msg); }); //Open new tab in browser for client //paste socket.io.js into the console //Connect as a client //connect to server, register as client var socket = io.connect("http://localhost:8080"); socket.on('connect', function () { socket.emit('client', 'MY NAME MAYBE', function (data) { console.log(data); //callback function }); }); //register call back for receiving a message from the server/operator socket.on("message", function(msg){ console.log("received message from operator " + msg); }); //Sending messages //send a message to the server(to the operator)-> remember this is 1 site with 1 operator socket.emit('message', 'sending this message to the operator', function (data) { console.log(data); // callback after sending message }); //send a message back to the client //NOTE-> CLIENT_SOCKET_ID is the id of a client's socket; you will see one if you emit message from a client //Using that to indicate which client this message shoudl go to socket.emit('message', {to_client: CLIENT_SOCKET_ID, msg: "sending this message to a client"}, function (data) { console.log(data); // callback after sending message });Also, I should point out that socket.io advertises itself as supported by iOS Safari and Android WebKit so you could roll our an HTML/JS based mobile solution for the operator quite easily. That should help get you rolling.