vue websocket webRTC实现用户登录上下线功能 以及视频通话功能
只是自己的理解,不是最好的解决办法,哈哈。
webRTC 和 WebSocket 要了解一下。。
WebRTC
(Web Real-Time Communication)即网页即时通信,是一个支持网页浏览器进行实时语音对话或视频对话的API。WebSocket
是一种在单个TCP连接上进行全双工通信的协议。在 WebSocket 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
首先实现用户登录以及用户列表是否在线。参考https://blog.csdn.net/qq_38455201/article/details/80374712
登录页面用onopen的连接websocket后onmessage会返回信息,其实应该是在全局去连接,因为我是个小demo就这样直接写了,前提是要用https 以及要有个websocket的服务
然后用户列表页面用onmessage去根据服务器返回的type 去更新当前的列表用户是否在线
this.socket = new WebSocket(this.socketUrl + this.$route.query.user)
this.socket.onmessage = function (evt) {
var received_msg = evt.data;
console.log("数据已接收:" +received_msg);
var obj = JSON.parse(received_msg);
//1代表上线 2代表下线 3代表在线名单 4代表普通消息
if(obj.msgType==1 || obj.msgType == 3) {
_this.onlineUsers = obj.onlineUsers;
_this.updateOnlineTable()
}
if(obj.msgType==1){
var onlineName = obj.useName;
_this.setMessageInnerHTML(onlineName+"上线了");
}
else if(obj.msgType==2){
var offlineName = obj.useName;
_this.offUsers = obj.useName
_this.offOnlineTable()
_this.setMessageInnerHTML(offlineName+"下线了");
}
else if(obj.msgType==3){
// _this.onlineUsers = obj.onlineUsers;
// _this.updateOnlineTable()
console.log("获取了在线的名单"+_this.onlineUsers.toString());
}
};
然后退出系统的按钮 调取close方法, 服务器响应,用户下线还是在onmessage里面返回的
// 退出
logOut () {
this.socket.close()
let _this = this
// // 监听Socket的关闭
this.socket.onclose = function(str) {
console.log(str);
console.log('与服务器连接关闭: ' + str.code)
// _this.socket.close()
};
}
我的列表页面:
webRTC实现视频通话 参考 https://segmentfault.com/a/1190000020780854 https://github.com/chyingp/blog/find/master
https://segmentfault.com/a/1190000002658593
主要是理解透着两个步骤,第一个步骤里的东西。