Socket IO 实现 聊天室

发表于 分类于 阅读次数：

没想到，自己写过的第一个聊天室，居然是用nodejs实现的【因为简单的啊】，使用起来很简单，要剖析里面的原理才是最重要的

先看代码：

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Socket.io</title>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="//libs.useso.com/js/jquery/1.10.0/jquery.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script src="js/chat.js"></script>
    </head>
    <body>
        <h1>Socket.io - Simple char Room</h1>
 
        <div>
            <span id="status">Connecting...</span>
            <input type="text" id="input" />
 
        </div>
        <div id="content"></div>
    </body>
</html>

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/**
 * Created by davidzhang on 14-10-22.
 */
$(function(){
    var content = $('#content');
    var status = $('#status');
    var input = $('#input');
    var myName = false;
 
    //建立socket链接
    socket = io.connect('http://localhost:3000');
 
    //收到server的连接确认
    socket.on('open',function(){
        status.text('Choose a name:');
    });
 
 
    //监听system事件，判断welcome或disconnect，打印系统消息
    socket.on('system',function(json){
        var p = '';
        if(json.type == 'welcome'){
 
            if(myName == json.text) {
                status.text(myName + ':').css('color', json.color);
            }
            p = '<p style="background:"'+json.color+'">system @ '+json.time+':Welcome ' + json.text + '</p>';
 
        }else if(json.type == 'disconnect'){
            p = '<p style="background:"'+json.color+'">system @ '+json.time+' : Bye ' + json.text + '</p>';
 
        }
 
        content.prepend(p);
 
    });
 
 
    //监听message事件，打印消息
    socket.on(message,function(json){
        var p = '<p<span style="color:"'+json.color+';">'+ json.author + '</span>@ ' + json.time +':' + json.text + '</p>';
        content.prepend(p);
    });
 
    input.keydown(function(e){
        if(e.keyCode == 13){
            var msg = $(this).val();
            if(!msg) return false;
            socket.send(msg);
            $(this).val('');if(myName==false){myName=msg}}})});

css代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
* {padding:0px; margin:0px;}
body{font-family:tahoma; font-size:12px;margin:10px;}
p {line-height:18px;padding:2px;}
div {width:500px;}
#content {
    padding:5px;
    background:#ddd;
    border-radius:5px;
    border:1px solid #CCC;
    margin-top:10px;
}
#input {
    border-radius:2px;
    border:1px solid #ccc;
    margin-top:10px;
    padding:5px;
    width:380px;
}
#status {
    width:100px;
    display:block;
    float:left;
    margin-top:15px;
}

服务器端的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var express = require('express');
var path = require("path");
var app = express();
var server = require("http").createServer(app);
var io = require("socket.io").listen(server);
 
//设置日志级别
io.set("log level", 1);
 
io.on('connection',function(socket){
    socket.emit("open");
 
    //构造客户端对象
    var client = {
        socket:socket,
        name:false,
        color:getColor()
    }
 
    socket.on('message',function(msg){
 
        var obj = {time:getTime(),color:client.color};
 
        if(!client.name){
            client.name = msg;
            obj['text'] = client.name;
            obj['author'] = 'System';
            obj['type'] = 'welcome';
            console.log(client.name + 'login');
 
            //返回欢迎语
            socket.emit('system',obj);
            //广播新用户已登录
            socket.broadcast.emit('system',obj);
        }else{
            obj['text'] = msg;
            obj['author'] = client.name;
            obj['type'] = 'message';
            console.log(client.name+'say:'+msg);
 
            //返回消息
            socket.emit('message',obj);
            //广播向其他用户消息
            socket.broadcast.emit('message',obj);
        }
 
    });
 
    socket.on('disconnect',function(){
        var obj = {
            time:getTime(),
            color:client.color,
            author:"System",
            text:client.name,
            type:'disconnect'
        };
 
        //广播用户已退出
        socket.broadcast.emit('system',obj);
        console.log(client.name+'Disconnect');
    });
});
 
//express 基本设置
app.configure(function(){
    app.set('port',process.env.PORT || 3000);
    app.set('views',__dirname + '/views');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname,'public')));
});
 
app.configure('development',function(){
    app.use(express.errorHandler());
});
 
//指定websocket的客户端的html文件
app.get('/',function(req,res){
    res.sendfile('views/chat.html');
});
 
server.listen(app.get('port'),function(){
    console.log('Express server listening on port '+app.get('port'));
});
 
var getTime=function(){
  var date = new Date();
  return date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
}
 
var getColor=function(){
  var colors = ['aliceblue','antiquewhite','aqua','aquamarine','pink','red','green',
                'orange','blue','blueviolet','brown','burlywood','cadetblue'];
  return colors[Math.round(Math.random() * 10000 % colors.length)];
}

这里的服务器是使用nodejs的express，当然里面使用的是nodejs的socket.io这个库，使用起来是很酷的，大家可以操作一下。

如果想需要真个代码的话，可以去这里

https://github.com/zhangda89/Socket-chat-Room