PuGu-chat
基本实现图
问题或解决描述
- 将及时聊天数据存放一个临时数组，如果需要后期可以在关闭或一段时间之后将数组数据保存在文件中(当然真正的聊天是不是这样有待考究)
- 存放用到了vue的子父组件通信，也就是广播事件。因为我将"我方"的聊天数据定义为一个组件。
- 较大难点是怎么把聊天最新数据呈现出来，一开始的解决方案是：
function scrollChat()
{
var e=document.getElementById("div1")
e.scrollTop=e.scrollHeight;
}
var s=setInterval("scrollChat()",200)//这里设定200毫秒将滚动条强制拉到底部
//当然，投机取巧总会有bug，这样的方法直接导致滚动条无法上拉。。
//最后实现用到了jquery，代码如下：
$(document).ready(function(){ //保持滚动条在最底部的jq实现，这段代码在广播事件后执行。
$('#chatBody').scrollTop($('#chatBody')[0].scrollHeight);
})
- 发现一个问题，懂得纠错。模板template中的id元素一旦在实例id下复用多个就会出现相同id。 貌似初次学ajax也有这样的问题。
初版图，未制作完毕
未完备注：未用现有组件，先尝试下自己用vue实现，还有些地方要处理。有些逻辑未免和最终即使聊天一样，这个需要去写多几次相同的小页面或者去git找相同的实例。明早补充。