WebSocket之仿QQWeb即时聊天系统(上)
1. 前言
Java web学完了，到了学期末，开始课设了，一共给了几个题目，大部分都是 JSP+servlet题目，当然我们也是主要学习的这些，一般都是什么什么管理系统，没啥意思，看到一个仿QQWeb即时聊天系统的题目，眼前一亮，发现从来没学过，一个有意思的题目，再次挑战自己，从零开始学习JavaScript、nodejs、socket.io 不知道这次课设能收获多少技术呢。
白嫖容易，创作不易，希望能让大家有所收获。
所有copy到的代码均是度娘、csdn等可以查到的，我的课设项目绝大部分都是原创，只有一些特定的、不懂的用法是copy
基本上我查询的资料(例如API等)都会在博客中列出网站，有需要的童鞋可以直接点击查看
本博客原创，转载请注明！
WebSocket之仿QQWeb即时聊天系统(上)
WebSocket之仿QQWeb即时聊天系统(下)
源码：
链接：https://pan.baidu.com/s/1xmCzP0TTLkWqgHnp62K9sA
提取码：Lin2
CSDN: https://download.csdn.net/download/RongLin02/19762352
本文原创，创作不易，转载请注明！！！
本文链接
个人博客：https://ronglin.fun/archives/236
PDF链接：见博客网站
CSDN: https://blog.csdn.net/RongLin02/article/details/117945296
2. 课程设计
2.1. 总述
本次课程设计从周二开始共大概用时5天多完成，共涉及到HTML、CSS、JavaScript、Jquery、Nodejs、MySQL、Websocket、Socket.io等技术。由于我们平时上课主要讲到的是Java Web，着重讲述JSP+servlet开发网页，平时练习也是直接用HTML较多，CSS样式表用的较少，只对盒模型有基本概念，JavaScript基本上没用过，只知道最最基本的语法，Jquery、Nodejs、Websocket、Socket.io等之前完全没听说过，全在这几天快速学习，时间紧迫，能力有限，如有疏漏，请多多指点，谢谢！
2.2. 需求分析
先来看看我选的题目的基本需求
仿QQWeb即时聊天系统
功能要求：
实现Web的点对点即时的文本消息聊天功能。
实现Web的表情的发送、接收和显示功能。
实现Web的图片的发送、接收和显示功能。
实现本地消息的存储，在离线的时候也能加载和查看历史消息；
要求使用WebSocket；
按照我当时的知识储备和理解，逐点分析，重点在最后一个，要求使用WebSocket，简单的看过WebSocket概念之后，可以发现，用WebSocket可以直接基本实现发送文本消息的功能，emoji表情的实现，查询了一下，有基本的封装好的接口，图片的发送接收应该也有专门的插件，本地消息的存储暂时没什么思路。
2.3. 成果展示
启动服务器
在根目录输入node app.js启动后端，然后会弹出来一个前端的网站，在浏览器地址栏输入这个网站。
实现聊天
然后分别登录两个用户，然后实现聊天互交
实现图片
然后展示发送图片功能，左侧是001账号，右侧是123账号
本地消息
这个功能一直在想如何实现比较好，最后决定在前端请求下载聊天记录，然后后端提供文件，然后前端在导入聊天记录
总的功能就展示完了，再补充一些没有展示的容错性：
登录界面，如果重复登录就提示该用户已经登录，如果用户名和密码不对应，提示密码错误!，如果之前从没登陆过，直接注册一个新号，写入数据库。
然后就是聊天界面，第一次登录显示的是和自己聊天的界面，想和谁聊天就在左侧点击对应的名字。
因为代码文件太多，之后我会把所有代码压缩，上传，现在简单说一下每个功能的大概实现过程
3.1. 准备工作
要想完成这次课设，要有顺手的开发工具，一定的知识储备，还要有一定的代码实现能力。
学习视频：Web前端-3小时教你打造一个聊天室（websocket）
这个视频是我开发过程中的主要学习资料，这里边有很多的基础知识，迅速入门，推荐仔细看完，我用了1.5倍速刷完之后才开始做课设的。
开发工具我用的Visual Studio Code
3.1.1. WebSocket
学习网站：HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
简单的说，一般的TCP/IP协议，是客户端提交一个请求(Get/Post)，然后服务器响应请求，服务器一般是没法主动给客户端发消息的，但是聊天系统是需要服务器给客户端推送消息的。这就需要一个全双工的协议，WebSocket就是，它可以主动给客户端推送消。有关WebSocket的学习，简单的看一下就行，大概了解它的概念就行了。
3.1.2. nodejs
这个有点麻烦，安装过程比较简单，很多东西我是直接这么用的，没有什么
主要使用的是NPM。简单的过一下安装过程
3.1.2.1. 安装nodejs
安装Nodejs，有关Nodejs的安装教程：Node.js 安装配置
我这里迅速过一下流程。
我们去官方下载Nodejs的安装包：Node.js 下载LTS(长期支持版本)版本的。
下载好后直接运行就行了。一直点击下一步就安装好了。中间有一个更改安装目录的，可以根据情况自行调整。
按照好之后，我们输入node -v可以查看安装的情况，如下图：
如果提示 node 不存在，就要去查看一下环境变量中是否存在：此电脑–右键–属性–高级系统设置–环境变量
找到path，点击编辑，找一下有没有nodejs的路径，如果没有可以重新安装一下，或者添加上。
3.1.2.2. NPM
然后重点是NPM
NPM :NPM 使用介绍
菜鸟的教程中，有很多很多有关NPM的用法，我这里不过多的说明，就说下如何用npm安装。
NPM是Nodejs下的包管理器，功能非常强大。我们之后要用npm安装一些常用的模块
安装过程中，可能会有因为在此系统上禁止运行脚本。有关详细信息，请参阅这样的报错导致没法安装，可以参考这个博客：
因为在此系统上禁止运行脚本。有关详细信息，请参阅
解决方法是，Windows10，对着电脑左下角的开始菜单，右键，选择Windows PowerShell(管理员)，然后输入
set-executionpolicy remotesigned
然后再输入Y写就行了，原因是执行策略的设置问题。感谢大佬的博客！
3.1.3. socket.io
中文官方文档：socket.io官方文档
有关socket.io，视频里也有很多描述，Socket.io是一个WebSocket库，用起来很方便，而且本次课设也主要是用socket.io开发
官方的API已经很全面了，我这里只是提一下。
首先是安装过程，在项目的根目录，右键–在集成终端中打开，然后输入下列代码
npm install jquery
npm install socketio
npm install express
然后就会生成一个node_modules文件夹用来存放安装好的模块，一些配置信息会生成在package-lock.json和package.json文件中。
先说几个常用的方法，
socket.emit('key',value);
这个是发送方法，key是名字，叫什么名字都行，value就是要发送的值，可以是服务器给客户端发送，也可以是客户端给服务器发送，类型也可以是一个对象。
socket.on('key',function(data){
console.log(data);
});
有发送就有接受，服务器或者客户端会监听，如果有终端通过key发送，就会获取到发送的数据，并且封装到data中，所以说上边的那个data的值就是emit的value。
然后就是服务器的基本框架
在项目根目录新建一个名为app.js的文件
const { data } = require('jquery');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.use(require('express').static('public'))
app.get('/', function(req, res){
res.redirect('index.html')
});
io.on('connection', function(socket){
console.log('connection')
socket.emit('ser_send','NB666');
socket.on('ser_acc',function(data){
console.log(data);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
实现了一个最最基本的交互，向客户端发送NB666字符串，还有一个接收客户端的数据，并且输出到终端中。
所以客户端就应该这样写
在项目根目录新建一个名为public的文件夹，在public文件夹下，新建一个名为index.html文件，然后以后可以将所有前端的代码都放在public文件夹下，更加方便整理。
test
在项目的根目录，右键–在集成终端中打开，然后输入node app.js，在浏览器的地址栏输入127.0.0.1:3000然后就可以看到数据的交互了。
终于准备工作做完了！到此，一些需要的最基本的课外知识已经学完了。
接下来就是根据需求开始敲代码了。
由于内容较多，请看下篇 =w=