zoukankan      html  css  js  c++  java
  • 用Socket开发的一枚小型实时通信App

    Socket 英文原意是插座。

    在网络世界里,

    当一台主机温柔而体贴的同时提供多个服务时,

    每个服务被绑定在一个端口上,

    而每个端口就好像一个小插座。

    用户们连接对应的插座去获取相应的服务。

    在Node.js中,使用的是socket.io来实现Realtime的通信。

    当程序两端实现数据通信时,

    每一端便化身为一枚可爱的Socket了。

    本示例使用Express做框架,

    数据库使用Mongo(后面附带常用查询语句),

    渲染引擎使用Jade。

    1. 安装 dependencies:

    在package.json文件里,指定所需依赖。

    除了body-parser,cookie-parser,debug,serve-favicon之类常用依赖之外,

    需安装的还有但不限于:

    express,jade,mongo-client,mongodb,monk,

    morgan,mpromise,mongoose,mongoskin……

    By the way,由于实时通信是面向多用户,

    如果你想给每个用户设置唯一的头像和Email,

    可以考虑使用gravatar,本例为方便叙述,不讲gravatar了。

    当然还有本篇的主角大人:socket.io

    然后就可以妥妥的sudo npm install了。

    2. 配置主程序 app.js

    你也可以叫它index.js或者server.js,

    总之它是程序启动的入口程序。

    首先仍然是require所需的模块们:

    var express = require('express');

    var app = express();

    var sio = require('socket.io');

    指定端口:

    var port = process.env.PORT || 8081;

    然后是socket的监听:

    var io = sio.listen( app.listen(port) );

    3. 引入数据库

    还是在app.js里继续写。

    要使用数据库,必须先引入数据库模块。

    var mongo = require('mongodb');

    var monk = require('monk');

    看到monk总想到和尚……

    这里就把它理解为连接Mongo的一个小中间件。

    在此不深究。

    有了monk模块,就可以连接数据库了:

    var db = monk('127.0.0.1:27017/myRealtimeApp');

    其中27017是Monk默认指定的端口,后面是数据库名。

    使用数据库之前,还需要将数据库传递给app:

    app.use(function( req, res, next ){

      req.db = db;

      next();

    });

    其中的next即是执行此段代码后面紧跟着的程序。

    为了方便维护,我把config的内容和routes规则写在另外的JS文件里。

    因此在next后面要引入这两个模块:

    require('./config')(app, io);

    require('./routes')(app, io);

    appio当作参数传递到模块里供继续使用。

    至此,app.js基本完成了。

    4. 配置config文件模块

    在config里基本就是bodyParser、cookieParser、Path、favicon以及视图引擎的配置了。

    不解释了,代码如下:

    var express = require('express');

    var cookieParser = require('cookie-parser');

    var bodyParser = require('body-parser');

    var path = require('path');

    var favicon = require('serve-favicon');

    module.exports = function(app, io){

      app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));

      app.use(cookieParser());

      app.use(bodyParser.json());

      app.use(bodyParser.urlencoded({ extended: false }));

      app.set('views', __dirname + '/views');

      app.set('view engine', 'jade');

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

    };

    5. 基本的路由规则

    由于App很小,所以路由规则和服务端的业务逻辑我都写在了routes.js里。

    如果程序更为复杂,最好能够分开写之。

    routes.js里,先配置基本的几个路由:

    app.get('/', function(req, res){

      res.render('login', { // 对应的在views目录里要有login.jade页,并在页面里有变量title和desc

        title: 'Realtime App with socket.io',

        desc: 'Welcome, this is V2.0'

      });

    });

    补充说明,本例的逻辑是在首页直接显示登录,

    你也可以不这样做,比如设计一个单独的首页,

    而登录页采用'/login'。说明毕。

    有登录页,就有注册页,GET '/reg'与之类似,不赘述了。

    在聊天页面,可以在URL上设置room的id,确保所有登录用户进入的是同一个room:

    app.get("/chat/:id", function(req, res){

      res.render("chat", { // 在views目录里对应要有chat.jade页面,并有变量title

        title: 'Whatever……'

      });

    });

    6. 注册登录与数据库的通信

    注册和登录的POST方法,

    是接收客户端的用户信息并需要与数据库产生数据交换的。

    因此有必要详细说明一下:

    首先是注册:

    app.post( '/register', function(req, res){

      var nickname = req.body.nickname;

      var phone = req.body.phone;

      var psw = req.body.password; // 从客户端获取用户名、电话、密码

      var db = req.db;

      var collection = db.get('usercollection'); // Mongo里的collection可以理解为table

      collection.insert({ //向表里插入一条用户数据

        nickname: nickname,

        phone: phone,

        password: psw

      }, function( err, doc ){ //写数据库后的回调,err有值表示读写失败

        if(err) {

          res.send('error'); 

        }else{ // 没有err表示读写成功,即用户注册成功

          var userInfo = {};

          var _sessionID = req.sessionID;

          userInfo['nickname'] = doc.nickname;

          userInfo['userphone'] = doc.phone;

          res.cookie( 'webchat_nickname', doc.nickname );

          res.cookie( 'webchat_token', _sessionID );

          res.cookie( 'webchat_roomid', staticRoomId ); // 用Cookie存储用户信息不是唯一的方法

          res.send( userInfo ); // 用户信息返回给客户端

        }

      });

    });

    需要注意的是:

    接收POST请求后的返回,必须res.end或res.send(包含end),

    否则在浏览器里的这个请求会一直pending。

    再来就是登录:

    app.post( '/login', function(req, res){

      var phone = req.body.username;

      var psw = req.body.password;

      var db = req.db;

      var collection = db.get('usercollection');

      var result = collection.findOne( {phone: phone, password: psw}, function(err, doc){

        if(!doc){

          res.send("error");

        }else{

          var nickname = doc.nickname;

          var userPhone = doc.phone;

          var _sessionID = req.sessionID;

          var userInfo = {};

          userInfo['nickname'] = nickname;

          userInfo['userphone'] = userPhone;

          userInfo['roomId'] = staticRoomId;

          res.cookie( 'webchat_nickname', nickname );

          res.cookie( 'webchat_token', _sessionID );

          res.cookie( 'webchat_roomid', staticRoomId );

          res.send( userInfo );

        }

      });

    });

    有登录,就有登出,具体实现此不赘述。

    只是登出时要记得清空Cookie。

    7. 附加福利:Mongo的常用查询语句

    先在本地安装Mongo,然后使用命令“mongo”进入Mongo。

    进入后会先显示:

    MongoDB shell version: 2.0.4

    connecting to: test // 默认连接到了 test 数据库

    常用语句如下:

    a:查看所有数据库:show dbs

    b:进入某一个数据库:use myRealtimeApp

    c:查看当前数据库的所有表:show collections // Mongo里叫collection,我就理解为表……

    d:查看各表状态:db.printCollectionStats() // 会列出所有表的状态

    e:查询某个表的数据:db.usercollection.find() //这样输出的结果没有格式化

    f: 查询某个表的数据:db.usercollection.find().pretty() //输出结果格式化了

    g:用某个特定条件查询某个表的数据:db.usercollection.find({'nickname': 'Alex'})

    h:存储某条数据:db.foo.save({'name': 'aaa'})

    i:删除某条数据:db.foo.remove({'name': 'aaa'}) 或 db.foo.remove()

    j:删除某个表:db.mycollection.drop()

    8. Socket的连接和事件的注册与触发

    到这里才是真正重要的内容:

    在服务端连接Socket,并注册load、login等事件的回调,供客户端触发时调用。

    同时,也要在客户端连接Socket,并注册startChat、receive等事件的回调,供服务端触发时调用。

    这有点像一张网,服务端和客户端分别注册了若干事件,供对方调用。

    同时它们也在调用对方所注册的事件。

    具体实现如下:

    先在服务端连接Socket:

    var chat = io.of("/socket").on("connection", function(socket){

      // 在这个回调里去注册socket的 'load', 'login', 'disconnect', 'msg' 等事件:

      socket.on('load',function(data){

        if( chat.clients(data).length === 0 ){ // 获取用户数量,但这个clients不能缓存,每次都必须用chat获取

          socket.emit('peopleinchat', {number: 0}); // "peopleinchat"在客户端注册,这里触发之,并将人数传到客户端

        } else if ( chat.clients(data).length === 1 ) { // 用户数量1个人

          socket.emit('peopleinchat', {

            number: 1,

            user: chat.clients(data)[0].username, // 用户姓名传到客户端

            id: data // room的id传到客户端

          });

        } else if ( chat.clients(data).length === 2 ) { // 用户数量2个人

          socket.emit('peopleinchat', {

            number: 2,

            user: [chat.clients(data)[0].username, chat.clients(data)[1].username], // 两个人及以上,user是数组

            id: data

          });

        } ...... else { // 可以设置一个最多人数的限制,超过时提示人数满员

          socket.emit('peopleinchat', { state: 'too many people here!' });

        }

      });

      socket.on('login',function(data){

        var maxPeopleLength = 10; // 自定义最大容纳人数

        if( chat.clients(data.id).length < maxPeopleLength ){ //必须在人数限制内

          socket.username = data.userName;

          socket.room = data.id; // 这个必须有

          socket.join(data.id); // join方法会使clients.length+1

          if( chat.clients(data.id).length >= 2 ) { // 只有 >= 2个人时才会触发startChat

            dealWithClients(data); // 每 login(增加)一个用户,要触发一次startChat并将用户数组传给客户端

          }

          // if length == 3 ... 不赘述了

        }

      });

      // dealWithClients 方法定义如下:

      function dealWithClients(data) {

        var usernames = []; // 包含当前登录用户的一个数组

        chat.clients(data.id).forEach(function(item, index){

          usernames.push( item.username ); // 拿到所有用户,push到这个数组里

        }); 

        chat.in(data.id).emit('startChat', { // 只有 >= 2个人时才会触发startChat

          check: true,

          user: usernames, // 所有用户

          number: usernames.length, // 人数

          id: data.id // room 的 id

        }); 

      };

      socket.on('msg',function(data){ // 这里注册发消息的事件(当客户端点击发送按钮时,触发之)

        socket.broadcast.to(socket.room).emit('receive', { // 接收消息的注册是在客户端,这里触发之

          msg: data.msg, // 消息内容

          user: data.user, // 发消息的用户

          time: new Date().getTime() // 发消息的时间,用服务器时间,返回给客户端供渲染

        });

      });

      socket.on('disconnect',function(data){

        // 失联后的回调,没写……

      });

    }); // End of connection

    9. Socket在客户端的事件注册与接收

    刚才说的都是在服务端的事件注册和触发。

    对应的在客户端也会有相应的事件触发和注册。

    下面的代码就是写在Browser客户端里的JS了:

    首先要在页面里引用socket的包包:socket.io.js

    然后在JS里获取socket对象并缓存:

    var socket = io.connect('/socket');

    从URL里获取room的id,如果用户手动修改URL,则需响应错误:

    var RoomId = Number(window.location.pathname.match(//chat/(d+)$/)[1]);

    从Cookie里获取登录后的自己的用户名:// 用于在页面中渲染时区分于其他用户

    var me = $.cookie("_nickname"); // 这不是必需的

    下面才是重头戏:

    socket.on("connect", function(){

      socket.emit("load", RoomId); // Connect成功后触发load事件

      // 这里就会执行注册在服务端的 load 事件回调里的代码了。

    });

    socket.on('startChat', function( data ){ // 这里注册的就是startChat

      renderUsers( data.number, data.user ); // 渲染当前登录的用户,渲染逻辑这里不贴了

    });

    socket.on("peopleinchat", function(data){ // 这里注册peopleinchat

      var howManyPeople = data.number;

      if( howManyPeople == 0 ){

        makePopAlert('No one here...', 0, 'Ok'); // 调用自己写的一个带样式的弹窗组件

      }else if( howManyPeople == 1 ){

        renderUsers( 1, data.user ); // 渲染用户

      }else if( howManyPeople == 2 ){

        renderUsers( 2, data.user );

      }else if( howManyPeople == 3 ){

        renderUsers( 3, data.user );

      }else{ ....

        // Too many people

      } 

    });

    socket.on("receive", function(data){ // 监听收到消息后的处理

      renderMsg(data); // 渲染消息的方法,自己定义,这里不贴了

    });

    至于发送消息,在页面里的[发送]按钮上绑定Click事件,

    并触发 socket.emit('msg', msgData); // msgData根据服务端所需的各个属性自己组装

    10. 小结

    以上是使用Socket实现的最简单的实时通信流程。

    基本思路就是在服务端和客户端分别引入Socket,

    并按业务逻辑在不同方向监听事件,在对应方向触发之。

    要完善实时通信的功能,还有很多可以继续写的。

    这里不写了。。。

  • 相关阅读:
    什么是linux的ftp
    linux安装ftp组件
    菜鸟之linux问题之图形界面和dos界面的登录问题
    linux第一面
    vmware下linux系统的安装过程
    vmware的安装
    装饰器的邪门歪道
    关于任务脚本里面用异步
    写类装饰器的2个小问题
    VUE 与其他常见前端框架对比
  • 原文地址:https://www.cnblogs.com/alex1128/p/socket.html
Copyright © 2011-2022 走看看