I am working on a chat system using nodejs and socket.io. So far my application work perfectly with Internet Explorer 10 but most of the time i can't send message on Firefox or Chrome or Opera (but i can still read message sent from IE in Chrome/Firefox/Opera). All my browser is updated to newest version, and without any addon/extension. I have also tried several different free port but without any result. I am working on Windows 7 environment and all my test was done locally.
I have no idea what went wrong, been scratching my head for last few hours but can't figure anything. I am new to node.js so please help !
Edit : I tried to force the transport to websocket by using io.set('transports', ['websocket']); and now IE stop working as well, so it seem before the reason IE work is socket.io force IE to use xhr-polling instead of websocket.
My code is as below (taken from http://code.tutsplus.com/tutorials/real-time-chat-with-nodejs-socketio-and-expressjs--net-31708)
Server index.js
var express = require("express");
var app = express();
var port = 3700;
app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.get("/", function(req, res){
res.render("page");
});
app.use(express.static(__dirname + '/public'));
var io = require('socket.io').listen(app.listen(port));
console.log(port);
console.log(io);
io.sockets.on('connection', function (socket) {
console.log("connect");
socket.emit('message', { message: 'welcome to the chat !' });
socket.on('send', function (data) {
io.sockets.emit('message', data);
});
});
console.log("Listening on port " + port);
The view
doctype html
head
title= "Real time web chat"
script(src='/chat.js')
script(src='/socket.io/socket.io.js')
body
#content(style='width: 500px; height: 300px; margin: 0 0 20px 0; border: solid 1px #999; overflow-y: scroll;')
.controls | Name: input#name(style='width:350px;') br input#field(style='width:350px;') input#send(type='button', value='send')
Chat.js
window.onload = function() {
var messages = [];
var socket = io.connect('http://localhost:3700');
var field = document.getElementById("field");
var sendButton = document.getElementById("send");
var content = document.getElementById("content");
var name = document.getElementById("name");
socket.on('message', function (data) {
if(data.message) {
messages.push(data);
var html = '';
for(var i=0; i<messages.length; i++) {
html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
html += messages[i].message + '<br />';
}
content.innerHTML = html;
} else {
console.log("There is a problem:", data);
}
});
sendButton.onclick = function() {
if(name.value == "") {
alert("Please type your name!");
} else {
var text = field.value;
socket.emit('send', { message: text, username: name.value });
}
};
}
Edit : According to the similar question Socket.io does not work on Firefox & Chrome it was fixed by adding below code into chat.js. I did it and it work on chrome/firefox/opera now but it is forcing the browser to use long-pooling/ajax instead of websocket, and i want my browser to use websocket (chrome/firefox should be able to support websocket better than IE i think ?)
io.configure('development', function(){
io.set('transports', ['xhr-polling']);
});