一、目的
猜测BOSS直聘、智联招聘等网页端的消息列表逻辑。
二、发出新消息
1、输入框用HTML的<textarea>标签。
2、监听发送按钮。
3、触发发送按钮事件，用AJAX来请求服务器接口。
把会话ID、收件人ID和新消息上传给服务器。
案例如下：
http.post("/news", {"sid":"hyuud7543619"},
{
"recvId": getRcvId(),
"msg": getMessage(),
},
function(code, xhr){},
function(code, data, xhr){}
);
三、收取新消息
主要难点：服务器推送消息和新消息通知。
1、用webSocket客户端监听新消息
ws.onmessage = function(e){
// 获取列表对象
var list = getList();
// 添加新消息
list.addItem(e.data);
// 未读消息个数加一
getUnreadSize().increment();
// 发出新消息通知
notify(e.data.sendId, e.data.msg);
}
消息列表一般用<div>标签来实现，用appendChild()接口来添加子节点。
2、发出新消息通知
浏览器默认有Notification类来弹窗通知。
如果需要声音播放，还需要调用<audio>标签的play()和stop()接口。
四、网页端的优缺点
优点：
1、应用功能总是获取最新的，升级容易。
2、开发成本少，界面搭建简单又美观。
缺点：
1、对于硬件功能很难调用。
例如：摄像头，麦克风调用，扬声器声音调用，新消息通知。
2、浏览器的安全限制太强。