现代软件工程_团队项目_贝塔阶段_开发日志_2018.01.15-2018.01.19

现代软件工程团队项目贝塔阶段_开发日志_2018.01.15-2018.01.19

2018.01.15

已完成：

1.版本上线

1.1上线操作步骤

1.1.1将网站整体文件夹拷贝到keqi1

1.1.2修改microDefinition.php的数据库名和根目录名

1.1.3修改注册界面发送验证码后直接填充功能

1.1.4修改del的主id的class为hide

1.1.5重新运行根目录的111.php（消除红点，也就是消除服务器返回的多余字符）

1.2修复上线过程中遇到的bug

1.2.1修复注册页面邮箱密码查重异常

1.2.2注册页面和完善信息页面检验信息正确性模块化

1.2.3

2018.01.16

已完成

1.简单的了解了sse和webSocket

1.1sse

1.1.1优点

sse具有小巧简便的特点，基于http，只需要在原先代码上作微小的改变，已尝试在页面实现。

1.1.2缺点

半双工，浏览器向服务器发送数据较困难，前几天不知道应该如何让服务器知道我是谁，因为不知道怎么在sse的情况下向服务器发送数据，现在意识到可以使用session

这是今天碰巧看到的视频教学，以前验证登录状态都是使用cookies验证，迟早是要换成session的（搁置一下）http://study.163.com/course/courseLearn.htm?courseId=1003547026#/learn/video?lessonId=1004094119&courseId=1003547026

因为之前一直想不通要怎样在sse情况下像服务器传送信息，故了解了一下socket

1.2webSocket

1.2.1优点

socket具有全双工的特点，从浏览器像服务器发送数据非常简单，有很多成熟框架可以调用，直接使用其接口就行。现已经实现了简单的在命令行中的通信，如果要在做到webSocket需要学习workerman或swoole，有很多全面的教程

1.2.2缺点

socket需要重新选择端口号，涉及到tcp/ip协议，较为复杂，对原先的代码改动量很大，而且比较难学，关于框架的文档很少有中文的。。。但是迟早也是要看的。

1.3综合考量

经过这几天的考虑和查阅资料发现，websocket能做的sse都能做，对于1秒以内的反馈而言socket更加合适，而1.5秒以上的则几乎一样。websocket在企业中应用更广泛，但难于上手，sse简单易学，考虑到目前项目人手紧缺，开发周期短，于是决定使用sse。

不过出来混迟早是要还的，websocket该学还是要学，留着以后再说吧，尝试了一天之后发现并不是很容易…

2.已实现sse的简单功能，即从数据库中实时读取并传回前端。

未完成

1.html简单的两人聊天界面

1.1消息呈现界面

1.2消息输入框

2.js

2.1点击发送时

2.1.1空则给出提示

2.1.2非空则将我的信息显示在页面上，并通过Ajex传递给php1

2.2检测服务器是否返回信息

2.2.1返回信息则显示在页面上

3.php1负责把我发出的信息写到我的信息表和他的信息表

4.php2负责sse部分

4.1负责检查我的表里面有无新数据

4.1.1检测到的数据与以前的数据不同则传送到页面（这里考虑要不要专门设置一个属性，当有新数据时更新这个属性，这样不毕每次都检查整个表，目前还不需要考虑压力部分）

4.1.1检测到的数据与以前相同则不发送（目前先不考虑这一点，先都发送到前端，以后要改）

2018.1.17

已完成

1.新增chatRoom.html

1.1好友列表（默认为曾经发送过消息的人）显示邮箱，最后一条消息时间和最后一条消息

1.2消息列表（在只有一个好友的情况下显示消息），只能显示登陆后的消息，存在bug

1.3输入框以及按钮

2.新增chatRoom.js

2.1登录通过friendListRead.php时填充好友列

2.2sse通过chatMessageReadSSE.php检测服务器发送的消息（仅能显示登陆后的，存在bug）

2.3点击发送按钮后将本人信息写到本人页面，再调用chatMessageWriteSSE.php将信息写入本人与对方聊天表

2.4点击好友列表对应部分的邮箱时将消息列表的hiddenAccount置为该好友

3.新增chatMessageReadSSE.php

3.1通过sse与服务器链接，接收服务器在我的消息表里toUstcEmail为我、且未读的消息

4.新增chatMessageWriteSSE.php

4.1发送消息时将信息写入本人与对方聊天表

5.新增friendListRead.php

5.1登录时由该文件读取好友列表

未完成

1.界面美化（打算找网上已有的页面源码）

2.增加好友头像，点击好友列表当前好友一整个区域时跳到该好友聊天界面，读取原有信息和新信息

3.新信息在好友列表中有提示，可以用徽章来做

4.ie浏览器的兼容问题

2018.1.18

已完成

1.chatRoom.html

1.1前端界面美化，左上角增加我的姓名，聊天界面上部为对方姓名，消息内容不再显示姓名

1.2固定聊天框高度，增加竖向滑动条

2.chatRoom.js

2.1聊天内容默认为第一个好友的内容

2.2检测是否登录、没登录返回主页，是否有好友、没好友返回主页，是否完善了个人信息、没有完善则跳转到完善页面

2.3有新消息时滑动条自动停留在下部

2.4增加了填充过往消息记录功能。默认最大100条。调用previousContentRead.php完成

3.friendListRead.php

3.1修复了原先没有正确读取最后一条消息的bug，但增加了时间复杂度

3.2同时到improve_info表中读取了好友真实姓名，不在页面显示邮箱，全显示姓名

4.previousContentRead.php

4.1点击左侧好友列表某人时显示最近100条聊天内容

未完成

1.已知的bug

1.1多客户端同时登陆时，消息可能会随机发送到前端

【解决办法】：设置不能同时在两地登录账号

1.2好友列表好友高度随消息长度不同而不同

【解决办法】：设置固定高度，设置最长显示字数

1.3发送消息根据消息长度不同显示效果不同

【解决办法】：消息内容限定在固定区域中

2.收到新消息时在好友列表应有提示

2.1消息条数提示

2.2好友标签置顶

3.收到消息时在主页提示

4.sse的ie浏览器兼容问题

2018.1.19

已完成

1.解决多客户端同时登陆问题

【解决办法】：在account_password表中增加ip地址一列，登录时存储当前ip地址。在聊天界面的sse时刻检测当前ip地址是否与数据库一致，若不一致则提示账号在其他地点登录。

2.略微美化前端页面

【解决办法】：对每一个好友标签做了高度限制

3.收到新消息后

3.1好友列表对应好友标签置顶

3.2若不是当前好友，则对应好友标签的徽章数量+1，最高显示99+，为0时隐藏

3.3若是当前好友，则显示，徽章不变化

4.发送消息后

4.1发送的消息不能为空，否则给出提示

4.2对应好友标签置顶

5.点击切换好友标签

5.1将该好友徽章内容设为0，并隐藏

6.修复了时间显示错乱的bug

【解决办法】：后端存的13位时间戳，前端按照10位解析出现了问题

7.修复了登录时不显示未读消息徽章，仅将未读消息直接显示的bug

【解决办法】：消息发送后为haveSend，下一次刷新时将haveSend全都改为没发送也没查看notView

status：

notView：没发送也没查看

haveSend：发送了没查看（亚稳态，本次不用再发送、查看了下次才不用在发送、没查看下次还要再发送）

haveRead：已经查看了（稳定不需要再发送）

8.IE等浏览器成功进行通讯

【解决办法】：引入polyfill的eventsource.min.js，无需对原本代码进行任何修改

9.使用强大的测试工具BrowserStack基本完成个浏览器测试

各windows、mac、iphone、android均可以支持消息发送与接收的功能

未完成

1.在主页也需要增加sse检测，检查是否有新的同意邀请等，顺道检查是否在别处登录【暂时搁置，等待后期分工】

2.前端页面的继续美化，例如消息要限制在“消息气泡”内部，页面比例、整体布局等【暂时搁置，等待后期分工】

3.火狐等部分浏览器在输入账号密码等信息时，提示此连接不安全【好像是因为网站没有备案，需要三个月才行】

4.iphon手机端访问时，消息显示很杂乱，甚至层叠。