聊天系统很复杂？前端工程师也能完成！

时间 2019-11-07

标签聊天系统很复杂前端工程师完成繁體版

原文原文链接

socket.io

简介

使用流行的 web 应用技术栈 —— 好比PHP —— 来编写聊天应用一般是很困难的。它包含了轮询服务器以检测变化，还要追踪时间戳，而且这种实现是比较慢的。html

大多数实时聊天系统一般基于 WebSocket 来构建,具体来讲就是socket.io。 WebSocket 为客户端和服务器提供了双向通讯机制。node

这意味着服务器能够推送消息给客户端。不管什么时候你发布一条消息，服务器均可以接收到消息并推送给其余链接到服务器的客户端。mysql

web 框架

首先要制做一个 HTML 页面来提供表单和消息列表。咱们使用了基于 Node.JS 的 web 框架 express 。请确保安装了 Node.JS。jquery

首先建立一个 package.json 来描述咱们的项目。推荐新建一个空目录。git

express 已经安装好了。咱们如今新建一个 index.js 文件来建立应用。github

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

app.get('/', function(req, res){
  res.send('<h1>Hello world</h1>');
});

http.listen(3000, function(){
  console.log('listening on *:4000');
});
    
复制代码

这段代码做用以下：web

Express 初始化 app 做为 HTTP 服务器的回调函数。redis

定义了一个路由 / 来处理首页访问。sql

使 http 服务器监听端口 4000。数据库

HTML 服务器

目前在 index.js 中咱们是经过 res.send 返回一个 HTML 字符串。若是咱们将整个应用的 HTML 代码都放到应用代码里，代码结构将变得很混乱。替代的方法是新建一个 index.html 文件做为服务器响应。

如今咱们用 sendFile 来重构以前的回调：

app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
复制代码

index.html 内容以下：

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: .5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>
  </body>
</html>
复制代码

集成 Socket.IO

Socket.IO 由两部分组成：

一个服务端用于集成 (或挂载) 到 Node.JS HTTP 服务器： socket.io
一个加载到浏览器中的客户端： socket.io-client

这个两部分都会运用到

npm install --save socket.io

npm install --save socket.io-client

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

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

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});
复制代码

咱们经过传入 http （HTTP 服务器）对象初始化了 socket.io 的一个实例。而后监听 connection 事件来接收 sockets，并将链接信息打印到控制台。

在 index.html 的标签中添加以下内容：

<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
</script>
复制代码

这样就加载了 socket.io。 socket.io 暴露了一个 io 全局变量，而后链接服务器。

请注意咱们在调用 io() 时没有指定任何 URL，由于它默认将尝试链接到提供当前页面的主机。

从新加载服务器和网站，你将看到控制台打印出 “a user connected”。

每一个 socket 还会触发一个特殊的 disconnect 事件：

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('disconnect', function(){
    console.log('user disconnected');
  });
});
    
复制代码

触发事件

Socket.IO 的核心理念就是容许发送、接收任意事件和任意数据。任意能被编码为 JSON 的对象均可以用于传输。二进制数据也是支持的。

这里的实现方案是，当用户输入消息时，客户端发送一个 chat message 事件，服务器接收一个 chat message 事件。index.html 文件中的 script 部分如今应该内容以下：

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script>
  $(function () {
    var socket = io();
    $('form').submit(function(){
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
  });
</script>
复制代码

广播

接下来的目标就是让服务器将消息发送给其余用户。

要将事件发送给每一个用户，Socket.IO 提供了 io.emit 方法：

io.emit('some event', { for: 'everyone' });

为了简单起见，咱们将消息发送给全部用户，包括发送者。

io.on('connection', function(socket){
  socket.on('chat message', function(msg){
    io.emit('chat message', msg);
  });
});
复制代码

用法总结

服务端

1.链接

监听客户端链接,回调函数会传递本次链接的socket

io.on('connection',function(socket));
复制代码

2.广播

（1）给全部客户端广播消息

io.sockets.emit('String',data);
复制代码

（2）给除了本身之外的客户端广播消息

socket.broadcast.emit("msg",{data:"hello,everyone"});
复制代码

（3）给指定的客户端发送消息

io.sockets.socket(socketid).emit('String', data);
复制代码

3.发送的消息

（1）监听客户端

socket.on('String',function(data));
复制代码

（2）给该socket的客户端发送消息

socket.emit('String', data);
复制代码

4.分组

io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('event_name',{});
    });
});
复制代码

进阶——处理用户发送的数据

1、redis

什么是Redis？

REmote DIctionary Server(Redis) 是一个由SalvatoreSanfilippo写的key-value(键值对)存储系统。

Redis是一个开源的使用ANSI C语言编写、遵照BSD协议、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。

它一般被称为数据结构服务器，由于值（value）能够是字符串(String), 哈希(Map), 列表(list), 集合(sets) 和有序集合(sorted sets)等类型。

Redis中的数据类型
哈希（Map hashmap）：散列表（Hash table，也叫哈希表），是根据键（Key）而直接访问在内存存储位置的数据结构。

列表（list）：列表是一种数据项构成的有限序列,即按照必定的线性顺序,排列而成的数据项的集合。（redis中使用双向链表实现）

集合（sets）：和中学时学习的概念是类似的。特色是集合中元素不能重复是惟一的。切内部是无序的

有序集合（sorted sets）：也是一种集合，可是内部数据是通过排序的。

redis安装

Redis 安装连接

npm redis

redis使用方法

0、创建node-redis的client端链接 npm i redis --save

// redis 连接
var redis = require('redis');
var client = redis.createClient('6379', '127.0.0.1');

// redis 连接错误
client.on("error", function(error) {
    console.log(error);
});
// redis 验证 (reids.conf未开启验证，此项可不须要)
// client.auth("foobared");
module.exports = {
    client:client
}

复制代码

一、set的存取

const {client} = require('./redis')

client.set('key001', 'AAA', function (err, response) {
    if (err) {
        console.log("err:", err);
    } else {
        console.log(response);
        client.get('key001', function (err, res) {
            if (err) {
                console.log("err:", err);
            } else {
                console.log(res);
                client.end(true);
            }
        });
    }
});
复制代码

二、hash存取

hash set的设值和抽取数据都有单个key和多个key两种方式：

const {client} = require('./redis')

client.hset('filed002', 'key001', 'wherethersisadoor', function (err, res) {
    if (err) {
        console.log(err);
    } else {
        console.log('res:', res);
        client.hget('filed002', 'key001', function (err, getRslt) {
            if (err) {
                console.log(err);
            } else {
                console.log('getRslt:', getRslt);
                client.end(true);
            }
        });
    }
});
复制代码

注意：当hget方法在指定field下找不到指定的key时，会传给回调函数null，而非空字符或undefined。

※ 设定多个key的值，取值时获取指定field下指定单个或多个key的值

const {client} = require('./redis')

var qe = {a: 2, b:3, c:4};
client.hmset('field003', qe, function(err, response) {
    console.log("err:", err);
    console.log("response:", response);
    client.hmget('field003', ['a', 'c'], function (err, res) {
        console.log(err);
        console.log(res);
        client.end(true);
    });
});
复制代码

hmset方法的设定值能够是JSON格式的数据，可是redis中key的值是以字符串形式存储的，若是JSON数据层数超过一层，会出现值是'[object Object]'的状况。

hmget方法的返回值是个数组，其中元素的顺序对应于参数的key数组中的顺序，若是参数数组中有在field内不存在的key，返回结果数组的对应位置会是null，也即不管是否能取到值，结果数组中的元素位置始终与参数的key数组中元素位置一一对应。

获取hash中全部key的方法是client.keys(fieldname, callback); 须要注意的是若是hash中key的数目不少，这个方法的可能耗费很长时间。

3.链表适合存储社交网站的新鲜事 lpush key value [value ...] 向链表key左边添加元素 rpush key value [value...] 向链表key右边添加元素 lpop key 移除key链表左边第一个元素 rpop key 移除key链表右边第一元素

const {client} = require('./redis')

client.lpush('test', 12345, function(err, response) {
    if(err){
        console.log("err:", err);
    }else{
        console.log("response:", response);
        client.rpop('test',function (err, res){
            if(err){
                console.log(err);
            }else{
                console.log(res);
                client.end(true);
            }
        });
    }
});
复制代码

redis-cli

socket.io中接入redis 并建立多个命名空间

How to use

const io = require('socket.io')(3000);
const redis = require('socket.io-redis');
io.adapter(redis({ host: 'localhost', port: 6379 }));
复制代码

将index.js修改成

const app = require('express')();
const http = require('http').Server(app);
const io = require('socket.io')(http);
const redis = require('socket.io-redis');
const {client} = require('./test/redis')
const moment = require('moment')


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

io.adapter(redis({host: 'localhost', port: 6379}));

var nameBox = ['/chatroom','/live','/vod','/wechat','/broadcast'];

for(var item in nameBox){
    var nsp = io.of(nameBox[item])
    socketMain(nsp,nameBox[item])
}

function socketMain(nsp,roomName) {
    nsp.on('connection',function (socket) {
        console.log('a user connected')
        socket.on('disconnect', function(){
            console.log('user disconnected');
        });
        socket.on('chat message', function(msg){
            var data = {"socketid":socket.id,"cid":roomName,"msg":msg,createTime:moment().unix()};
            client.lpush('message',JSON.stringify(data),redis.print)
            
            console.log('message: ' + msg);
        });
    })
}

http.listen(4000, function(){
    console.log('listening on *:4000');
});
复制代码

index.html

var socket = io.connect("http://127.0.0.1:4000/live");

复制代码

接入redis

client.lpush('message',JSON.stringify(msg),redis.print)

复制代码

2、另起一个服务端拿redis数据进行处理

Question：两个服务怎么相互通讯？

Answer：使用socket.io-client 具体步骤以下：

1.在数据处理程序中引入 socket.io-client 
var io = require('socket.io-client');

2.用socket.io-client 模拟了一个，链接到主程序io中的客户端
var socket = io.connect('ip+'/live'', {reconnect: true});

3.经过这个模拟的客户端，与主程序通讯
socket.emit('redisCome', result);
复制代码

修改redis.js

module.exports = {
    client:client,
    ip:'http://127.0.0.1:4000'
}
复制代码

新建sclient.js

const io = require('socket.io-client');
const async = require('async');
const moment = require('moment');
const redis = require('redis');

const {client,ip} = require('./test/redis');
const domain = require('domain');
const debug = require('debug')('socket-client:main');

var origin = io.connect(ip+'/', {reconnect: true});
var chatroom = io.connect(ip+'/chatroom', {reconnect: true});
var live = io.connect(ip+'/live', {reconnect: true});
var vod = io.connect(ip+'/vod', {reconnect: true});
var wechat = io.connect(ip+'/wechat', {reconnect: true});
var broadcast = io.connect(ip+'/broadcast', {reconnect: true});

var namBox = {root:origin,chatroom:chatroom,live:live,vod:vod,wechat:wechat,broadcast:broadcast};

var reqDomain = domain.create();
reqDomain.on('error', function (err) {
    console.log(err);
    try {
        var killTimer = setTimeout(function () {
            process.exit(1);
        }, 100);
        killTimer.unref();
    } catch (e) {
        console.log('error when exit', e.stack);
    }
});

reqDomain.run(function () {
    compute();
});

process.on('uncaughtException', function (err) {
    console.log(err);
    try {
        var killTimer = setTimeout(function () {
            process.exit(1);
        }, 100);
        killTimer.unref();
    } catch (e) {
        console.log('error when exit', e.stack);
    }
});

function compute() {
    client.llen('message', function(error, count){
        if(error){
            console.log(error);
        }else{
            if(count){
                //console.log('-------------has count',time);
                popLogs();
                process.nextTick(compute);
            }else{
                //console.log('-------------empty',time);
                setTimeout(function(){
                    compute();
                },100);
            }
        }
    });
}

function popLogs(){
    var time = moment().unix();
    console.log('-------------dealStart-------------',time);
    client.rpop('message',function(err,result){
        if(err){
            console.log(err);
        }else{
            var result = JSON.parse(result);
            try{
                var cid = result.cid;
                //console.log('place',result.place);
            }catch(e){
                console.log('empty data cid',result);
                return;
            }
            console.log(' start '+' nsp: '+cid +' time: '+time);
            if(namBox[cid]){
                console.log(result);
                namBox[cid].emit('redisCome',result);
            }
        }
    });
}
复制代码

修改index.js 增长redisCome监听事件

/*接收redis发来的消息*/
socket.on('redisCome',function (data) {
    console.log('-------------redisCome',data.msg);
    try{
        var msg = data.msg
    }catch(e){
        var msg = '';
    }
    console.log(data);
    nsp.emit('message.add',msg);
});
复制代码

修改index.html

socket.on('message.add',function (msg) {
    $('#messages').append($('<li>').text(msg));
})
复制代码

3、增长用户发送信息校验

增长信息的安全性，咱们能够对用户发送的信息进行敏感词、sql注入攻击、xss攻击等进行过滤使用async一步步操做流程

修改sclient.js

async.waterfall([
    function (done) {
        user.messageDirty({msg:result.msg},function(err,res){
            //console.log('sql done'/*,res*/);
            done(err,res);
        });
    },
    function (res,done) {
        user.messageValidate({msg:result.msg},function(err,res){
            //console.log('key done'/*,res*/);
            done(err,res);
        });
    }
],function (err,res) {
    if(err){
        console.log('err!!!!',err,result);
        namBox[cid].emit('messageError',err);
    }else{
        if(namBox[cid]) {
            console.log(result);
            namBox[cid].emit('redisCome', result);
        }
    }
})
复制代码

修改index.js

/*接收redis错误信息返回*/
socket.on('messageError',function(err){
    console.log('messageError');
    try{
        nsp.emit('message.error',err.msg);
    }catch(e){

    }
});
复制代码

修改index.html

mysql入库

1.在本地安装mysql数据库 2.下载node mysql包

npm install mysql --save
复制代码

3.链接数据库创建链接池

var mysql      = require('mysql');
var pool = mysql.createPool({
    host: 'localhost',
    user:'root',
    password:'123456',
    database : 'danmaku'
});

var query = function(sql,options,callback){
    pool.getConnection(function(err,conn){
        if(err){
            callback(err,null,null);
        }else{
            conn.query(sql,options,function(err,results,fields){
                //释放链接
                conn.release();
                //事件驱动回调
                callback(err,results,fields);
            });
        }
    });
};
复制代码

新建query.js

var {query} = require("./test/redis");

query("select * from demo", function(err,results,fields){
    //do something
    if(err){
        console.log(err)
    }else {
        console.log(results)
    }
});
复制代码

新建insert.js

var {query} = require("./test/redis");
const moment = require('moment')

query('insert into demo(message,createTime) values(?,?)',[123,moment().unix()],function(err,results,fields){
    //do something
    if(err){
        console.log(err)
    }else {
        console.log(results)
    }
});
复制代码

mysql -u root -p use danmaku; select * from demo;

4.在程序中添加入库步骤

弹幕播放器

ABPlayerHTML5

项目地址

连接点这里