WebSocket之仿QQWeb即时聊天系统(下)

1. 前言

上篇主要说了准备阶段和要学的基本知识，当然学的知识还是死的，还是要敲代码，下篇主要就是用上编学的知识实现本次课设任务

WebSocket之仿QQWeb即时聊天系统(上)
WebSocket之仿QQWeb即时聊天系统(下)
源码：
链接：https://pan.baidu.com/s/1xmCzP0TTLkWqgHnp62K9sA
提取码：Lin2
优快云: https://download.youkuaiyun.com/download/RongLin02/19762352

本文原创，创作不易，转载请注明！！！
本文链接
个人博客：https://ronglin.fun/archives/238
PDF链接：见博客网站
优快云: https://blog.youkuaiyun.com/RongLin02/article/details/117984160

白嫖容易，创作不易，希望能让大家有所收获。
所有copy到的代码均是度娘、csdn等可以查到的，我的课设项目绝大部分都是原创，只有一些特定的、不懂的用法是copy
基本上我查询的资料(例如API等)都会在博客中列出网站，有需要的童鞋可以直接点击查看
本博客原创，转载请注明！

仿QQWeb即时聊天系统
功能要求：
实现Web的点对点即时的文本消息聊天功能。
实现Web的表情的发送、接收和显示功能。
实现Web的图片的发送、接收和显示功能。
实现本地消息的存储，在离线的时候也能加载和查看历史消息；
要求使用WebSocket；

2. 服务器

服务器的代码逻辑比较简单，而且比较固定，所以先说服务器的代码逻辑
基本功能和上篇的那个一样，主要就是用socket.on和socket.emit,需要注意的是，所有用到这个两个方法的地方都要写到

io.on('connection', function(socket){
//这里
});

io.on的方法体中，应该是表示服务器和客户端建立好连接的部分。

2.1. 数据库

2.1.1. 配置代码

数据库是个好东西，存储数据可以帮我们省下很多的麻烦，接下来就说用nodejs如何连接数据库
要先安装模块

npm install mysql; 

JavaScript代码

var mysql = require('mysql');
var connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '123456',
  database : 'test'
});

这些就是配置数据，先用require导包，然后创建连接，host是地址，端口如果不设置默认是3306，user，password就是登录数据库的账号密码，database就是要用到的数据库，模板性很强，就这么用就行了。

数据库建表

数据库名称为test
字段名称一共两个，一个是id另一个是password，类型都是varchar类型

2.1.2. 回调函数

用到数据库不得不提一个概念就是回调函数，因为JavaScript访问数据库是一个异步的过程，要用回调函数完成异步查询
彻底理解 Node.js 中的回调(Callback)函数
这是菜鸟教程有关回调函数的解释，如果想要熟练运用js完成复杂的功能，一定要好好理解回调函数
简单地说，就是当异步调用时，数据还没返回给调用者，但是调用者直接继续执行了。
举个例子，假设有个getValue()方法，它因为效率很低，需要10s才能将结果返回给result，在js中，这样写就错了

var value;
getValue(function(result){
    value = result;
    console.log(value);    //①
}); 
console.log(value);  //②

在①号的输出是有值的，而在②的输出就是一个空。原因是在执行完getValue方法之后，它会立即执行②的代码，但是这时候value的值还没得到，而在function内部，value的值已经得到了，输出出来的就是有结果的。
这样就需要一个回调函数callback，来告诉调用者：“我执行完了,我把结果返回给你,你可以继续执行需要部分了”所以案例代码要想用回调函数可以这样写

function getValuePlus(callback){
    getValue(function(result){
    callback(result);
});
}
//这样调用
getValuePlus(result =>{
    console.log(result)
})

由于时间紧迫，我并没深入的去学习回调函数的机制，只是简单的理解了一下，如有问题，请多多指点。

2.1.3. 数据库代码

说了这么多，其实就是数据库的查询过程是一个异步过程，调用者想要获取结果就得等数据返回。贴上代码

//从数据库中查询
function select_user(data,callback){
  //连接数据库开始查询
  let sql = 'SELECT * FROM user where id = \''+data.username+'\';';
  connection.query(sql,function (err, result) {
    if(err){
      console.log('[SELECT ERROR] - ',err.message);
      callback(null)
    }
    //用回调函数告诉调用者执行完了
    callback(result);
  });
}
//插入数据库
function insert_user(data){
  let sql ='INSE