Node.js 学习（六）——websocket 组件实现在线聊天室 demo-技术圈

Node.js学习（六）——websocket组件实现在线聊天室demo

要实现的功能

在线人员列表展示,上下线刷新在线人员列表

即时聊天

demo图片

用express新建项目

express -e websocketdemo

下载依赖

在websocketdemo目录下执行命令，在项目下生成node_modules目录

npm install

添加websocket模块

npm install nodejs-websocket

实现代码

项目目录

在view下添加一个chartroom.ejs页面

index.js修改

添加跳转到页面的路由

添加websocket服务器

服务器中3种类型的逻辑处理

code=0，代表初始化客户端请求。1.将当前连接放入在线人集合中。2.向所有在线人发出更新在线人的消息。

code=1，代表发送消息。将所有在线人的消息界面追加上当前发送的消息。

code=2，代表人员列表更新。上线是新增一个在线人员，下线或刷新浏览器是减少一个在线人员。

var express = require('express');

var router = express.Router();

var ws = require("nodejs-websocket");

//存所有人的连接

var onLineUser = new Array();



/* GET home page. */

router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });

});



//聊天室页面

router.get('/chartroom', function(req, res, next) {

  res.render('chartroom');

});



//聊天服务器8002

var server = ws.createServer(function (conn) {

  conn.on("text", function (str) {

    var obj = JSON.parse(str);

    switch(obj.code){

      case 0:initClient(conn);break;

      case 1:returnMsg(conn,obj);break;

      case 2:userListHandle(conn,obj);break;

    }

  })

  conn.on("close", function (code, reason) {

    console.log("关闭连接")

  });

  conn.on("error", function (code, reason) {

    console.log("异常关闭")

  });

}).listen(8002)



//发送消息，返回消息

function returnMsg(conn,obj){

  if(userList.length != 0){

    var returnText = obj.name+" "+obj.date+":\n"+"  "+obj.sendContent+"\n";

    var returnObj = new Object();

    returnObj.code = 1;

    returnObj.returnText=returnText;

    for(var i=0;i
      onLineUser[i].sendText(JSON.stringify(returnObj))

    }

  }

}



//初始化的消息

function initClient(conn){

  console.log("onLineUser长度:"+onLineUser.length);

  onLineUser.push(conn);

  flashUserList();

}



var userList = new Array();

//人员列表更新

function userListHandle(conn,obj){

  if(obj.type == "add"){

    userList.push(obj.name);

  }else if(obj.type == "del"){

    userList.remove(obj.name);

  }

  flashUserList();

}



//刷新所有人的用户列表

function flashUserList(){

  if(userList.length != 0){

    var myObj = new Object();

    myObj.code = 2;

    myObj.returnText =arrToStr(userList);

    for(var i=0;i
      onLineUser[i].sendText(JSON.stringify(myObj));

    }

  }

}



function arrToStr(arr){

  var str = "";

  for(var i = 0 ; i < arr.length ; i++){

    str += arr[i] + "\n";

  }

  return str;

}



Array.prototype.indexOf = function(val) {

  for (var i = 0; i < this.length; i++) {

    if (this[i] == val) return i;

  }

  return -1;

};



Array.prototype.remove = function(val) {

  var index = this.indexOf(val);

  if (index > -1) {

    this.splice(index, 1);

  }

};



module.exports = router;