socket.io 实现在线聊天室

开发语言、环境

• node.js
• win7

在学习WebSocket的时候，发现node.js的socket.io模块对WebSocket进行了封装更加方便开发者使用，便开始学习socket.io并以在线聊天室作为学习项目。

node.js

node.js是一个JavaScript运行环境，简单的说就是运行在服务端的node.js

• 基础教程推荐Node.js菜鸟教程
• 安装包推荐4.6.0LTSNode.js官网
• 本项目代码主要参考socket.io官网的例子
• 界面则采用CSS框架bootstrap

node.js是通过事件和回调来支持并发的，所以很好的理解它的事件机制有助于接下来的编程。

业务逻辑

1. 用户需登录后才能发生消息，如未登陆则弹出登陆框
2. 用户发送消息，服务端接收后转发给所有用户
3. 当有用户离线，服务端群发询问还有谁在线，并更新用户列表

项目目录结构

chat
  --node_modules
  --static
  --views
  app.js

• node_modules主要是存放node.js的各种模块
• static用来存放一些静态资源，这里放的是bootstrap
• views用来存放页面，本项目放的是chat.html
• app.js则是服务端，监听各种事件并处理

express模块

express是一个基于Node.js平台的极简、灵活的 web 应用开发框架，它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。

• 本聊天室的应用

  var express = require('express');
  var app = express();
  var http = require('http').Server(app);
  var io = require('socket.io')(http);
  
  var userList = new Array();
  
  app.use("/static",express.static(__dirname + '/static'));
  
  app.get('/', function(req, res){
    res.sendFile(__dirname + '/views/chat.html');
  });
  

代码

代码主要在chat.html和app.js两个文件

app.js

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var userList = new Array();

app.use("/static",express.static(__dirname + '/static'));

app.get('/', function(req, res){
  res.sendFile(__dirname + '/views/chat.html');
});

io.on('connection', function(socket){
  //绑定用户登录事件
  socket.on('userLogin', function(userName){
    userList.push(userName);
    io.emit('userLoginList', userList);
  });
  //绑定用户发送消息事件
  socket.on('chat message', function(userName, msg){
    //
    io.emit('chat message', userName, msg);
  });
  //绑定断开连接事件
  socket.on('disconnect',function(){
    console.log('disconnect');
    //有人断开连接，询问还有谁在线，更新用户列表
    userList = new Array();
    io.emit('who_online');
  });


});

http.listen(8765, function(){
  console.log('listening on *:8765');
});

chat.html

  
    
    
    
    

    
  
  
    

      

        
聊天室 ——畅所欲言
      
      

        

          


            
          
        

        

          

            

          
        
      

      

        

          

            
          
          

            Send
          
        
      
    

    

      

        

          

            ×Close
            
登录
          
          

            

              

                
              
            
          
          

            取消
            确定