手撸一个网页版微信

419 阅读3分钟

最近做了一个web移动端的通信模块,基本上是仿照现有的通信软件做了一些基础功能

包括:

联系人的查看,

获取附近人,

添加好友,

发送文字,图片,视频,位置,

群聊的新建,解散

群成员的添加,删除

群公告的修改

个人基础信息的修改

下回是一些主要的知识点和遇到的一些问题:

1,移动端的适配

2,websocket于vue的配合使用

3,浏览器定位在非https下的使用方法

4,大批量信息接收与对应群组派发

5,消息缓存与清除

下面是一些主要的功能点演示:


新建群:

搜索:


附近人添加:

三大模块:


消息发送:


消息的复制,删除,撤回,转发:



下面来说说遇到的主要问题与方法:

1,移动端的适配问题

(1)移动端的适配问题
移动端的适配是采用rem的适配方式,这种适配方式比较简单,书写时转换也比较                     方便

只需要给定html的font-size值就可以了

html{  
    font-size:26.666667vw;  
    width:100%;
}

兼容性只需要考虑 vw的兼容性,在安卓4.4,以及ios7以上都是支持的,具体的兼容性可以看下图


(2)关于视频和图片在移动端的显示播放问题

图片在移动端会加载较慢,尤其时在聊天界面图片比较多的情况下,在不给定图片高度的情况下,会造成界面高度变高,这时又需要将聊天界面保持滚动在最底部,所以需要监听img的onload属性,保持界面滚动在最底部。

视频在移动端是否支持自动播放和是否会加载第一帧作为预览图在各个浏览器上表现不一致,

而且播放时会调用手机自带播放器,为了统一视觉效果,可以将video标签定义为内联播放

<video       
 @canplaythrough="videoCanPlay(item)"     
x5-playsinline        
playsinline        
webkit-playsinline           
></video>

并且监听屏幕touchstart,让视频改为手动播放。

2,websocket与vue的配合使用

websocket使用的是sock.js和stomp.js配合

只需使用

Stomp.over(new SockJS(socketUrl)).connect()

方法即可建立socket链接,下步需要订阅socket地址,这一步需要与后端开发同学商量好

3,浏览器定位在非https下使用问题

浏览器提供了原生navigator对象来获取位置,不过有很大的局限性,此处用的是百度地图提供的sdk,在非https下有不小偏差,而且百度地图提供的经纬度是其自家编码,如果需要将此经纬度另作他用的话需要商量好使用什么格式的编码

百度地图提供的sdk使用很简单

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){  
if(this.getStatus() == BMAP_STATUS_SUCCESS){     
// alert('您的位置:'+r.point.lng+','+r.point.lat);       
_this.updateLocation(r.point.lng,r.point.lat)  
}  else {    
alert('failed'+this.getStatus());  
}},{enableHighAccuracy: true})

4,大批量信息接收与对应群组派发

消息接收时需要派发到当前聊天,非当前聊天的消息需要缓存,当切换到其聊天时需要再次派发,因为使用的vuex进行消息缓存与派发,当一次性有大批量消息进来时由于vuex的更新机制是批量更新,在短时间内多次修改会被合并,只会保留最后一次,所以会造成当前聊天只会更新到最后一条信息,其他信息会丢失,解决办法是使用函数防抖,加上使用消息队列来替换单个消息进行延迟派发

console.log('这里是接收到聊天消息通知处理事件')
this.reviceList.push(param2)
clearTimeout(this.reviceTime)
this.reviceTime = setTimeout(() => { 
 this.$store.commit('GETRECEIVEMESSAGE', this.reviceList) 
 this.reviceList = []
}, 100)

以上是在项目中主要遇到的一些细节与知识点😹

码字不易,欢迎点赞😊

如果对相关知识点以及更多细节感觉兴趣欢迎私聊😂