nodejs学习笔记(3)-socket.io打造简易聊天室

Contents

1. 建立express工程和socket.io
2. 先运行下socket.io官网的代码
3. socket.io相关
4. 聊天室
1. 4.1. 服务器app.js
2. 4.2. 客户端chat.js
3. 4.3. 客户端显示index.html
4. 4.4. 效果
5. 问题

http://blog.yidongzhifu.net/2014/04/19/nodejs%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0(3)-socket.io%E6%89%93%E9%80%A0%E7%AE%80%E6%98%93%E8%81%8A%E5%A4%A9%E5%AE%A4/

在一大侠的blog中看到他用socket.io做了一个网络聊天室，就照着大侠的方法自己也做了一个．Socket.io旨在在不同版本，不同终端的浏览器之间实现实时通信,为了实现在不同浏览器间实时通信，socket.io会从WebSocket,AjAX long polling,Forever iframe中选择一种最有的通信方法．支持IE5.5+,Safari 3+.Chrome 4+,firefox 3+,Opera 10+等桌面浏览器和Iphone Safari,iPad Safari,Android Webkit,WebOs webkit等手机浏览器．

建立express工程和socket.io

mkdir socketio
cd socketio
express -e
npm install socket.io

先运行下socket.io官网的代码

修改app.js,增加如下代码

app.get('/', function(req,res){
res.sendfile(__dirname+'/client/index.html');
});
var server=http.createServer(app);
server.listen(80);
var io = require('socket.io').listen(server);

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

建立一个client的文件夹，并在里面创建一个index.html的文件

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

在这个例子中只要客户端连接上，服务器端就会发送一个news事件的消息－＞客户端接收到news事件后—>打印消息并发送一个my other event事件的消息－＞服务器端接收到这个my other event事件后就将其打印出来

socket.io相关

1.socket.io 有connect，message，disconnect三个常用的基本事件，用户可以自定义自己的事件，我这个学习demo中就有isopen,system自定义的事件
2.socket.send方法默认是message事件发送消息
3.socket.emit(action, data, function)为发送事件的方法,可以发送一个空事件过去,socket.emit(‘isopen’);
4.socket.on(action,function)为接受事件的方法,也可以接受一个空事件,socket.on(‘isopen’,function(){});

聊天室

服务器app.js

app.get('/socket',function(req,res){
res.sendfile(__dirname+'/client/index.html')
});
var server=require('http').createServer(app);
server.listen(80);
var io=require('socket.io').listen(server);

io.sockets.on('connection',function(socket){
var client={
        name:false
}

// 发送一个打开socket的消息信号
socket.emit('isopen');
socket.on('message',function(data){
        if(!client.name){
        var sysmsgobj = {
                time:getTime(),
                name:data,
                type:'connect'
                };
                client.name=data;
                socket.emit('system',sysmsgobj);
                socket.broadcast.emit('system',sysmsgobj);
                console.log('login'+sysmsgobj.name);
        }else{
                var msgobj = {time:getTime()};
                msgobj['name']=client.name;
                msgobj['content']=data;
                msgobj['type']='message';
                socket.emit('message',msgobj);
                socket.broadcast.emit('message',msgobj);
                console.log('new message',msgobj);
        }
});
socket.on('disconnect',function(){
 var sysmsgobj = {
                time:getTime(),
                name:client.name,
                type:'disconnect'
                };
                socket.emit('system',sysmsgobj);
                socket.broadcast.emit('system',sysmsgobj);
                console.log(sysmsgobj.name+'is logout');
});
});
var getTime=function(){
        var dt=new Date();
        return dt.getHours()+":"+dt.getMinutes()+":"+dt.getSeconds();
}

客户端chat.js

 $(function () {
socket = io.connect('http://localhost');
var msgbox=$('#msgbox');
var input=$('#input');
var name=$('#name');
var issetname = false;
socket.on('isopen',function(){
        name.text('please enter a name');
});

//接受系统消息
socket.on('system',function(systemdata){
if(systemdata.type == 'connect'){
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' join us'+'</p>';
        if(issetname==systemdata.name){
        name.text(issetname); 
        }
}else if(systemdata.type == 'disconnect'){
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' left'+'</p>';
}
msgbox.prepend(p);
});
socket.on('message', function (msgobj) {
        console.log('receive:'+msgobj);
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+msgobj.time+'-'+msgobj.name+':'+msgobj.content+'</p>';
        msgbox.prepend(p);
}); 
//接受系统消息
socket.on('system',function(systemdata){
if(systemdata.type == 'connect'){
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' join us'+'</p>';
        if(issetname==systemdata.name){
        name.text(issetname); 
        }
}else if(systemdata.type == 'disconnect'){
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+systemdata.time+'-'+systemdata.name+' left'+'</p>';
}
msgbox.prepend(p);
});
socket.on('message', function (msgobj) {
        console.log('receive:'+msgobj);
        var p = '<p  style="color:#445566;line-height: 90%;margin:2px 0px 0px 0px">'+msgobj.time+'-'+msgobj.name+':'+msgobj.content+'</p>';
        msgbox.prepend(p);
}); 

//通过“回车”提交聊天信息
input.keydown(function(e) {
        if (e.keyCode === 13) { 
            var msg = $(this).val();
            socket.send(msg);
            $(this).val('');
            console.log(msg);
            if(issetname === false){
                issetname=msg;
                }
        }
    });
});

客户端显示index.html

<!DOCTYPE html>
<html>
<head>
<title>socket.io</title>
<link rel='stylesheet' href='/stylesheets/style.css' />

<script src="javascripts/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="javascripts/chat.js"></script>
</head>
<body>
<h1>socket demo</h1>
<p>socket demo</p>
<span id="name"></span>
<input type="text" id="input" />
<div id="msgbox"></div>
</body></html>

效果

问题

1.其中出现error raised: Error: listen EADDRINUSE，后来发现是端口的问题,开了多个node出现的