用Socket开发一枚小型实时通信App

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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,

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

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

这里不写了。。。

 

以上是关于用Socket开发一枚小型实时通信App的主要内容,如果未能解决你的问题,请参考以下文章

socket-遇到一枚假程序员

Socket通信

什么时候用http网络连接,什么时候用socket网络连接呢?

MFC的socket类

JAVA-Socket通信笔记

JAVA Socket 编程学习笔记