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

主要是理解透着两个步骤，第一个步骤里的东西。