精华内容
下载资源
问答
  • webSocket连接

    2021-04-24 14:09:43
    created(){ this.ws(); }, methods:{ ws(){ // WebSocket if ("WebSocket" in window) { //协议以及主机名的处理 const {host, protocol } = window.location; const pr.
     created(){
                this.ws();
    },
     methods:{
    			ws(){
                    // WebSocket
                    if ("WebSocket" in window) {
                    	// 获取协议,主机名
                        const {host, protocol } = window.location;
                        const pro = protocol === "https:" ? "wss://" : "ws://";
                        this.websocket = new WebSocket(`${pro}${host}/api/rates?id=${this.id}`);
                        // this.initWebSocket();
                        this.websocket.onerror = this.setErrorMessage;
    
                        // 连接成功
                        this.websocket.onopen = this.setOnopenMessage;
    
                        // 收到消息的回调
                        this.websocket.onmessage = this.setOnmessageMessage;
    
                        // 连接关闭的回调
                        this.websocket.onclose = this.setOncloseMessage;
    
                        // 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
                        window.onbeforeunload = this.onbeforeunload;
                    } else {
                        alert("当前浏览器 Not support websocket");
                    }
                },
                setErrorMessage() {
                    console.log(this.websocket)
                    console.log( "WebSocket连接发生错误   状态码:" + this.websocket.readyState);
                },
                setOnopenMessage() {
                	// 连接成功,状态码为1
                    console.log("WebSocket连接成功    状态码:" + this.websocket.readyState);
                },
                setOnmessageMessage(event) {
                    // 服务器推送的消息
                    // console.log("服务端返回:" + event);
                    // console.log(event)
                    this.uploadingFileList = JSON.parse(event.data);
                    let arr = [];
                    this.uploadingFileList.map(item => {
                        var param = {};
                        param.Filename = item.Filename;
                        param.Totalsize = rates(item.Totalsize);
                        param.progress = Math.floor((item.Currentsize / item.Totalsize) * 100) > 1 ? Math.floor((item.Currentsize / item.Totalsize) * 100) : 1
                        param.Needtime = time(item.Needtime);
                        param.Speedrate = rates(item.Speedrate);
                        param.IsDone = item.IsDone;
                        arr.push(param);
                    })
                    this.tableData = arr;
                },
                setOncloseMessage() {
                	// 连接关闭,状态码为3
                    console.log("WebSocket连接关闭    状态码:" + this.websocket.readyState);
                },
                onbeforeunload() {
                    this.closeWebSocket();
                },
                closeWebSocket() {
                    this.websocket.close();
                },
                blockUpload(scope){
                    this.closeWebSocket();   // 关闭webSocket连接
                    this.$emit('blockUpload');
                    scope.IsDone = true;
                },
    }
    
    展开全文
  • 如何捕获新建websocket异常

    千次阅读 2020-03-04 17:56:26
    今天看了一眼之前写的前端代码,发现一个明显的问题 try { socket = new WebSocket(host); } catch (e) { ...websocket 发生异常, 是catch不到的,因为新建websocket连接是异步的,异常抛出是同步的...

    今天看了一眼之前写的前端代码,发现一个明显的问题

             try {
                 socket = new WebSocket(host);
             } catch (e) {
                 reconnect();
             }

    websocket 发生异常, 是catch不到的,因为新建websocket连接是异步的,异常抛出是同步的,解决办法是通过onerror事件监听

    socket.onerror = function(){}

     

    展开全文
  • websocket 连接方法

    2018-08-21 10:53:21
    WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。 协议包括一个开放的握手以及随后...

    WebSocket协议支持(在受控环境中运行不受信任的代码的)客户端与(选择加入该代码的通信的)远程主机之间进行全双工通信。用于此的安全模型是Web浏览器常用的基于原始的安全模式。 协议包括一个开放的握手以及随后的TCP层上的消息帧。 该技术的目标是为基于浏览器的、需要和服务器进行双向通信的(服务器不能依赖于打开多个HTTP连接(例如,使用XMLHttpRequest或<iframe>和长轮询))应用程序提供一种通信机制。

     

    下面是一般的websocket连接方法和demo;

    仅仅只供参考:

    var websocket = null;
    
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window) {
    	websocket = new WebSocket(urlObj.getSocket());
    } else {
    	alert('当前浏览器不支持websocket');
    }
    
    //连接发生错误的回调方法
    websocket.onerror = function() {
    	//alert("error");
    	//setMessageInnerHTML("error");
    };
    
    //连接成功建立的回调方法
    websocket.onopen = function(event) {
    	//alert("open");
    	//setMessageInnerHTML("open");
    	var index = $.cookie("digBrow");
    	if(index == 0) {
    		send("hello~我已经上线了。");
    	}
    	index++;
    	$.cookie("digBrow", index);
    }
    
    //接收到消息的回调方法
    websocket.onmessage = function(event) {
    	var json = JSON.parse(event.data);
    	var img = (json.USER_HEADIMG).replace(/\~/g, "/");
    	if(json.ID != null) {
    		if(urlObj.getTokenObj().ID != json.ID) {
    			//	var curr_time = moment().format('YYYY-MM-DD HH:mm:ss');
    			var curr_time = getNowFormatDate();
    			var msg = '';
    			msg += '<li class="animated fadeInLeft media">';
    			msg += '<a class="pull-left" href="#">';
    			msg += img == 'undefined' || img == '' || img == null ? '<img class="media-object" style="border-radius:99px;width:60px;" alt="Generic placeholder image" src="img/avatars/avatar3.jpg">' : '<img class="media-object" style="border-radius:99px;width:60px;" alt="Generic placeholder image" src="' + getImgUrl(urlObj.url + img) + '">';
    			msg += '</a>';
    			msg += '<div class="media-body chat-pop">';
    			msg += '<h4 class="media-heading">' + json.USER_NAME + '<span class="pull-right"><i class="fa fa-clock-o"></i> <abbr class="timeagos" title="' + curr_time + '" >' + curr_time + '</abbr> </span></h4></h4>';
    			msg += json.msg;
    			msg += '</div>';
    			msg += '</li>';
    			var list = $('.chat-window .chat-list');
    			list.append(msg);
    			jQuery("abbr.timeago").timeago();
    			$('.chat-window .scroller').slimScroll({
    				scrollTo: list.height()
    			});
    			var bwoserMesIMG = img == 'undefined' || img == '' || img == null ? '/img/avatars/avatar3.jpg' : getImgUrl(urlObj.url + img);
    			msgBrowser.alert(json.USER_NAME + ":", json.msg, bwoserMesIMG);
    		}
    	}
    }
    
    //连接关闭的回调方法
    websocket.onclose = function() {
    	//	  alert("close");
    	// setMessageInnerHTML("close");
    }
    
    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    /*  window.onbeforeunload = function(){
          websocket.close();
      }*/
    
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
    	document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
    
    //关闭连接
    function closeWebSocket() {
    	websocket.close();
    }
    
    //发送消息
    function send(message) {
    	//var message = document.getElementById('text').value;
    	//	  append();
    	websocket.send(message);
    }
    
    //消息推送
    var socket = null;
    
    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window) {
    	socket = new WebSocket(urlObj.getMsgSocket());
    } else {
    	alert('当前浏览器不支持websocket');
    }
    
    //连接发生错误的回调方法
    socket.onerror = function() {
    	//alert("你的WebSocket链接失败");
    };
    
    //连接成功建立的回调方法
    socket.onopen = function(event) {
    
    }
    	//接收到消息的回调方法
    socket.onmessage = function(event) {
    
    	//window.location.reload();//刷新网页
    	var json = JSON.parse(event.data);
    	// 定时弹出框(消息通知)
    	var timeOrder = 10;
    	setTimeout(function() {
    		var createTime = json.CREATED_DT;
    		var unique_id = $.gritter.add({
    			title: '标题:' + json.MSG_TITLE,
    			text: '内容:' + json.MSG_BODY,
    			image: 'img/gritter/cloud.png',
    			sticky: true,
    			time: '时间:' + getDateTostr(createTime),
    			class_name: 'my-sticky-class'
    		});
    		setTimeout(function() {
    			$.gritter.remove(unique_id, {
    				fade: true,
    				speed: 'slow'
    			});
    		}, 10000);
    	}, timeOrder);
    	
    	// 消息
    	if ($('.liMsg').html() !=undefined) {
    		$('.liMsg').html("");
    	}
    	var messageUrl = urlObj.messageNotifyList
    	var jsonObj = {};
    		jsonObj['FK_USER_ID'] = json.USER_ID_ARR;
    		jsonObj['MSG_STATUS'] = 'NO';
    		var datas = commAjaxPost(messageUrl, jsonObj);
    		var length = datas.length;
    		if(datas != undefined && length > 0 && datas != 'list is null') {
    			var numbers = '<i class="fa fa-bell"></i><span id="appendNumS" class="badge">' + length + '</span>'
    			$('#appendNum').html(numbers);
    			$('#setNotificationNum').html("");
    			$('#setNotificationNum').append(length + '条通知');
    			// 循环获取json数据
    			$.each(datas, function(index) {
    				var falg = (index % 2 == 0);
    				var time = datas[index]['CREATED_DT'];
    				var title = datas[index]['MSG_TITLE'];
    				if(title.length > 7) {
    					title = title.substring(0, 6) + '...';
    				}
    				$('.dropdown-title').after(putHtml(datas[index]['MSG_ID'], title, getDateTostr(time), falg));
    			});
    		}else{
    			$('#setNotificationNum').append(0 + '条通知');
    		}
    	timeOrder += 10;
    	msgBrowser.alert(json.MSG_TITLE, json.MSG_BODY, "/img/megBroow.png"); // 桌面通知
    }

    参考:http://hao2013.cn/?id=32

    展开全文
  • 学习html5的WebSocket连接 1、什么是WebSocket WebSocket 是一种自然的全双工、双向、单套接字连接。使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer ...

    学习html5的WebSocket连接

    1、什么是WebSocket

    WebSocket 是一种自然的全双工、双向、单套接字连接。使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称“SSL”))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一连接。WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们。例如,和轮询不同,WebSocket只发出一个请求。服务器不需要等待来自客户端的请求。相似地,客户端可以在任何时候向服务器发送消息。相比轮询不管是否有可用消息,每隔一段时间都发送一个请求,单一请求大大减少了延迟。

    2、WebSocket API

    WebSocket API 使你可以通过Web,在客户端应用程序和服务器端进程之间建立全双工的双向通信。WebSocket 接口规定了可用于客户端的方法以及客户端与网络的交互方式。首先,你要调用WebSocket 构造函数(constructor),创建一个WebSocket 连接。构造函数返回WebSocket 对象实例。你可以监听该对象上的事件,这些事件告诉你何时连接打开,何时消息到达,何时连接关闭以及何时发生错误。你可以与WebSocket 对象交互,发送消息或者关闭连接。下面来研究WebSocket API 的各个方面。

    3、WebSocket 构造函数

    为了建立到服务器的WebSocket 连接,使用WebSocket 接口,通过指向一个代表所要连接端点的URL,实例化一个WebSocket对象。WebSocket 协议定义了两种URL 方案(URL scheme)—ws 和wss,分别用于客户端和服务器之间的非加密与加密流量。ws(WebSocket) 方案与HTTP URI 方案类似。wss(WebSocketSecure,WebSocket 安全)URI 方案表示使用传输层安全性(TLS,也叫SSL)的WebSocket 连接,使用HTTPS 采用的安全机制来保证HTTP 连接的安全。WebSocket 构造函数有一个必需的参数URL(指向连接目标的URL)和一个可选参数protocols(为了建立连接,服务器必须在其响应中包含的一个或一组协议名称)。在protocols 参数中可以使用的协议包括XMPP(eXtensible Messaging and PresenceProtocol, 可扩展消息处理现场协议)、SOAP(Simple ObjectAccess Protocol,简单对象访问协议)或者自定义协议。

    var ws = new WebSocket("ws://www.websocket.org");

    带有协议支持的WebSocket 构造函数示例

    复制代码

    // Connecting to the server with multiple protocol choices
    var echoSocket = new WebSocket("ws://echo.websocket.org", ["com.kaazing.echo",
    "example.imaginary.protocol"])
    echoSocket.onopen = function(e) {
        // Check the protocol chosen by the server
        console.log(echoSocket.protocol);
    }

    复制代码

    由于WebSocket 服务器ws://echo.websocket.org 只理解com.kaazing.echo 协议, 而不理解example.imaginary.protocol,该服务器在触发WebSocket open 事件的时候选择com.kaazing.echo 协议。使用数组为你提供了让应用程序对不同服务器使用不同协议的灵活性。

    4、WebSocket 事件

    WebSocket API 是纯事件驱动的。应用程序代码监听WebSocket对象上的事件,以便处理输入数据和连接状态的改变。WebSocket协议也是事件驱动的。客户端应用程序不需要轮询服务器来得到更新的数据。消息和事件将在服务器发送它们的时候异步到达。WebSocket 编程遵循异步编程模式,也就是说,只要WebSocket连接打开,应用程序就简单地监听事件。客户端不需要主动轮询服务器得到更多的信息。要开始监听事件,只要为WebSocket 对象添加回调函数。也可以使用addEventListener() DOM 方法为WebSocket 对象添加事件监听器。

    WebSocket 对象调度4 个不同的事件:
    open
    message
    error
    close
    和所有Web API 一样,可以用on< 事件名称> 处理程序属性

    监听这些事件,也可以使用addEventListener(); 方法。

    4.1、WebSocket 事件:open

    一旦服务器响应了WebSocket 连接请求,open 事件触发并建立一个连接。open 事件对应的回调函数称作onopen。

    ws.onopen = function(e) {
        console.log("Connection open...");
    };

    到open 事件触发时,协议握手已经完成,WebSocket 已经准备好发送和接收数据。如果应用程序接收到一个open 事件,那么可以确定WebSocket 服务器成功地处理了连接请求,并且同意与应用程序通信。

    4.2、WebSocket messagess事件

    WebSocket 消息包含来自服务器的数据。你也可能听说过组成WebSocket 消息的WebSocket 帧(Frame)。message 事件在接收到消息时触发,对应于该事件的回调函数是onmessage。

    复制代码

    ws.onmessage = function(e) {
        if(typeof e.data === "string"){
            console.log("String message received", e, e.data);
        } else {
            console.log("Other message received", e, e.data);
        }
    };

    复制代码

    除了文本,WebSocket 消息还可以处理二进制数据,这种数据作为Blob 消息或者ArrayBuffer 消息处理。因为设置WebSocket 消息二进制数据类型的应用程序会影响二进制消息,所以必须在读取数据之前决定用于客户端二进制输入数据的类型。

    复制代码

    ws.binaryType = "blob";
    // Event handler for receiving Blob messages
    ws.onmessage = function(e) {
        if(e.data instanceof Blob){
            console.log("Blob message received", e.data);
            var blob = new Blob(e.data);
        }
    ws.binaryType = "arraybuffer";
    // Event handler for receiving ArrayBuffer messages
    ws.onmessage = function(e) {
        if(e.data instanceof ArrayBuffer){
            console.log("ArrayBuffer Message Received", + e.data);
            // e.data is an ArrayBuffer. Create a byte view of that object.
            var a = new Uint8Array(e.data);
        }
    };

    复制代码

    4.3、 WebSocket 事件:error

    error 事件在响应意外故障的时候触发。与该事件对应的回调函数为onerror。错误还会导致WebSocket 连接关闭。如果你接收一个error 事件,可以预期很快就会触发close 事件。close 事件中的代码和原因有时候能告诉你错误的根源。error事件处理程序是调用服务器重连逻辑以及处理来自WebSocket 对象的异常的最佳场所。

    ws.onerror = function(e){
        console.log('websocked error');
        handerError();
    }

    4.4、 WebSocket 事件:close

    close 事件在WebSocket 连接关闭时触发。对应于close 事件的回调函数是onclose。一旦连接关闭,客户端和服务器不再能接收或者发送消息。

    ws.onclose = function(e) {
        console.log("Connection closed", e);
    };

    WebSocket close 事件在连接关闭时触发,这可能有多种原因,比如连接失败或者成功的WebSocket 关闭握手。WebSocket 对象特性readyState 反映了连接的状态(2 为正在关闭,3 为已关闭)。

    close 事件有3 个有用的属性(property),可以用于错误处理和恢复:wasClean、code 和error。wasClean 属性是一个布尔属性,表示连接是否顺利关闭。如果WebSocket 的关闭是对来自服务器的一个close 帧的响应,则该属性为true。如果连接是因为其他原因(例如,因为底层TCP 连接关闭)关闭,则该属性为false。code 和reason 属性表示服务器发送的关闭握手状态。这些属性和WebSocket.close() 方法中的code 和reason 参数一致。

    5、WebSocket 方法

    WebSocket 对象有两个方法:send() 和close()。

    5.1、WebSocket 方法:send()

    使用WebSocket 在客户端和服务器之间建立全双工双向连接后,就可以在连接打开时(也就是说,在调用onopen 监听器之后,调用onclose 监听器之前)调用send() 方法。使用send() 方法可以从客户端向服务器发送消息。在发送一条或者多条消息之后,可以保持连接打开,或者调用close() 方法终止连接。

     

    ws.send("Hello WebSocket!");

     

    send() 方法在连接打开的时候发送数据。如果连接不可用或者关闭,它抛出一个有关无效连接状态的异常。人们开始使用WebSocket API 时常犯的一个错误是试图在连接打开之前发送消息。

    // Wait until the open event before calling send().
    var ws = new WebSocket("ws://echo.websocket.org")
    ws.onopen = function(e) {
        ws.send("Initial data");
    }

    如果想发送消息响应另一个事件, 可以检查WebSocketreadyState 属性,并选择只在套接字打开时发送数据。

    复制代码

    function myEventHandler(data) {
        if (ws.readyState === WebSocket.OPEN) {
            // The socket is open, so it is ok to send the data.
            ws.send(data);
        } else {
            // Do something else in this case.
            //Possibly ignore the data or enqueue it.
        }
    }

    复制代码

    除了文本(字符串)消息之外,WebSocket API 允许发送二进制数据,这对于实现二进制协议特别有用。这样的二进制协议可能是TCP 上层的标准互联网协议,这些协议的载荷可能是Blob 或ArrayBuffer。

    5.2、WebSocket 方法:close()

    使用close() 方法, 可以关闭WebSocket 连接或者终止连接尝试。如果连接已经关闭,该方法就什么都不做。在调用close() 之后,不能在已经关闭的WebSocket 上发送任何数据。可以向close() 方法传递两个可选参数:code(数字型的状态代码)和reason(一个文本字符串)。传递这些参数能够向服务器传递关于客户关闭连接原因的信息。

    6、WebSocket 对象特性

    可以使用多种WebSocket 对象特性提供关于WebSocket 对象的更多信息:readyState、bufferedAmount 和protocol。

    6.1、WebSocket 对象特性:readyState

    下表readyState 特性、取值和状态描述

    特性常量取值状态
    WebSocket.CONNECTING0连接正在进行中,但还未建立
    WebSocket.OPEN1连接已经建立。消息可以在客户端和服务器之间传递
    WebSocket.CLOSING2连接正在进行关闭握手
    WebSocket.CLOSED3连接已经关闭,不能打开

    6.2、WebSocket 对象特性:bufferedAmount

    设计应用程序时,你可能想要检查发往服务器的缓冲数据量,特别是在客户端应用程序向服务器发送大量数据的时候。尽管调用send() 是立即生效的,但是数据在互联网上的传输却不是如此。浏览器将为你的客户端应用程序缓存出站数据,从而使你可以随时调用send(),发送任意数量的数据。然而,如果你想知道数据在网络上传送的速率,WebSocket 对象可以告诉你缓存的大小。你可以使用bufferedAmount 特性检查已经进入队列,但是尚未发送到服务器的字节数。这个特性报告的值不包括协议组帧开销或者操作系统、网络硬件所进行的缓冲。

    代码展示一个使用bufferedAmount 特性每秒发送更新的例子。如果网络无法承受这一速率,它会相应地作出调整。

     

    复制代码

    // 10k max buffer size.
    var THRESHOLD = 10240;
    // Create a New WebSocket connection
    var ws = new WebSocket("ws://echo.websocket.org/updates");
    // Listen for the opening event
    ws.onopen = function () {
        // Attempt to send update every second.
        setInterval( function() {
            // Send only if the buffer is not full
            if (ws.bufferedAmount < THRESHOLD) {
                ws.send(getApplicationState());
            }
        }, 1000);
    };

    复制代码

     

    对于限制应用向服务器发送数据的速率,从而避免网络饱和,bufferedAmount 特性很有用。

    6.3、 WebSocket 对象特性:protocol

    在前面关于WebSocket 构造函数的讨论中, 我们提到了protocol 参数,它让服务器知道客户端理解并可在WebSocket上使用的协议。WebSocket 对象的protocol 特性提供了另一条关于WebSocket 实例的有用信息。客户端和服务器协议协商的结果可以在WebSocket 对象上看到。protocol 特性包含在打开握手期间WebSocket 服务器选择的协议名,换句话说,protocol特性告诉你特定WebSocket 上使用的协议。protocol 特性在最初的握手完成之前为空,如果服务器没有选择客户端提供的某个协议,该特性保持空值。

    例子:

    复制代码

    <!DOCTYPE html>
    <title>WebSocket Echo Client</title>
    <h2>Websocket Echo Client</h2>
    <div id="output"></div>
    <script>
    // Initialize WebSocket connection and event handlers
    function setup() {
        output = document.getElementById("output");
        ws = new WebSocket("ws://echo.websocket.org/echo");
        // Listen for the connection open event then call the sendMessage function
        ws.onopen = function(e) {
            log("Connected");
            sendMessage("这是发送的数据")
        }
        // Listen for the close connection event
        ws.onclose = function(e) {
            log("Disconnected: " + e.reason);
        }
        // Listen for connection errors
        ws.onerror = function(e) {
            log("Error ");
        }
        // Listen for new messages arriving at the client
        ws.onmessage = function(e) {
            log("Message received: " + e.data);
        // Close the socket once one message has arrived.
            ws.close();
        }
    }
    // Send a message on the WebSocket.
    function sendMessage(msg){
        ws.send(msg);
        log("Message sent");
    }
    // Display logging information in the document.
    function log(s) {
        var p = document.createElement("p");
        p.style.wordWrap = "break-word";
        p.textContent = s;
        output.appendChild(p);
        // Also log information on the javascript console
        console.log(s);
    }
    // Start running the example.
    setup();
    </script>
    </html>

    复制代码

    7、WebSocket 浏览器兼容性检测

    if (window.WebSocket){
        console.log("This browser supports WebSocket!");
    } else {
        console.log("This browser does not support WebSocket.");
    }

    8、在WebSocket 中使用HTML5 媒体

    作为HTML5 和Web 平台的一部分,WebSocket API 可以很好地和所有HTML5 特性(feature)配合。这个API 所能发送和接收的数据类型广泛地用于传输应用程序数据和媒体。字符串当然可以表示XML 和JSON 等Web 数据格式。二进制类型可以和拖放(Drag-and-Drop)、FileReader、WebGL 和Web Audio API 等集成。我们来看看如何结合WebSocket 使用HTML5 媒体。代码清单展示了一个结合WebSocket 使用HTML5 媒体的完整客户端应用程序。

    你可以根据这些代码创建自己的HTML 文件。

    复制代码

    <!DOCTYPE html>
    <title>WebSocket Image Drop</title>
    <h1>Drop Image Here</h1>
    <script>
    // Initialize WebSocket connection
    var wsUrl = "ws://echo.websocket.org/echo";
    var ws = new WebSocket(wsUrl);
    ws.onopen = function() {
        console.log("open");
    }
    // Handle binary image data received on the WebSocket
    ws.onmessage = function(e) {
        var blob = e.data;
        console.log("message: " + blob.size + " bytes");
        // Work with prefixed URL API
        if (window.webkitURL) {
            URL = webkitURL;
        }
        var uri = URL.createObjectURL(blob);
        var img = document.createElement("img");
        img.src = uri;
        document.body.appendChild(img);
    }
    // Handle drop event
    document.ondrop = function(e) {
        document.body.style.backgroundColor = "#fff";
        try {
            e.preventDefault();
            handleFileDrop(e.dataTransfer.files[0]);
            return false;
        } catch(err) {
            console.log(err);
        }
    }
    // Provide visual feedback for the drop area
    document.ondragover = function(e) {
        e.preventDefault();
        document.body.style.backgroundColor = "#6fff41";
    }
    document.ondragleave = function() {
        document.body.style.backgroundColor = "#fff";
    }
    // Read binary file contents and send them over WebSocket
    function handleFileDrop(file) {
        var reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = function() {
            console.log("sending: " + file.name);
            ws.send(reader.result);
        }
    }
    </script>
    </html>

    复制代码

    文章参考:HTML5+WebSocket权威指南

    展开全文
  • webSocket连接错误原因

    万次阅读 2018-06-05 17:48:00
    1、在SSM架构中正常使用的代码,迁移到...错误原因:要注入ServerEndpointExporter,这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint。要注意,如果使用独立的servlet容器,而不是直接使...
  • 我们在编译WebRTC时,采用websocket进行通信,在写Window c++ websocket服务端时,客户端连接出现以下连接信息,但是在客户端测试websocket消息时,控制台不打断户端发出消息。 在网上查找了一番,原来客户端连接...
  • 什么是WebSocket?HTML5 WebSocketWebSocket 是 HTML5 开始提供的一种在单个 ...在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。在 WebSocket A...
  • 7.1.1.关闭WebSocket连接

    2016-11-09 11:38:00
    7.1.1.关闭WebSocket连接 为_关闭WebSocket连接_,端点需关闭底层TCP连接。端点应该使用一个方法完全地关闭TCP连接,以及TLS会话,如果合适,丢弃任何可能已经接收的尾随的字节。当必要时端点可以通过任何可用的...
  • websocket异常

    千次阅读 2020-07-21 18:48:43
    解释:连接被强制中断 java.io.IOException: Unable to unwrap data, invalid status [CLOSED] java.io.EOFException: null at org.apache.tomcat.util.net.NioEndpoint$NioSocketWrapper.fillReadBuffer 解释...
  • java使用websocket触发异常问题解决

    千次阅读 2019-05-09 00:17:08
    遇到该问题时,是由于客户端非正常关闭引起的,此时需要在...//发生异常时候调用关闭错误连接 } 因为ws中一旦会话关闭调用其任何方法(close()方法除外)将导致抛出{@link java.lang.IllegalStateException}
  • 注意:发送websocket连接,url中不允许有中文字符,中文字符要进行转码encodeURIComponent() var url = 'ws://100.100.10.10/';//服务器地址 let sock = null; let socketOpen = false; function connect(user, func...
  • websocket建立连接有些时候能成功,有些时候不能成功。 连接成功并订阅主题后,有些时候能成功收到后台推送的消息,但是大多数时候不能收到,后台消息一直在推送。... console.log("WebSocket连接失败!") }); ```
  • Android WebSocket连接不成功

    千次阅读 2017-05-24 15:45:27
    哎,今天初次接触websocket,说说我的心路历程吧,小伤心一直连接不成功还好最后可以了。 看到的第一篇博客 Android中webSocket的使用:http://www.cnblogs.com/Conker/p/6508420.html 但是按照博客中的...
  • 今天写着个博客是为了大家早点跳出这个坑。我写的websocket 使用的是net core 2.2写的,一开始的时候报错说握手失败,直到后来看到别的大神说,初始化websocket的时候一定... #region 1.0 配置WebSocket 服务 priv...
  • springboot2.0 websocket连接和集群

    千次阅读 2018-04-17 11:44:03
    1. 引入websocket的starter &lt;dependency&gt; &lt;groupId&gt;org.springframework.boot&lt;/groupId&gt; &lt;artifactId&gt;spring-boot-starter-websocket&lt;/...
  • WebSocket connection to ‘ws://localhost:8080/bidingRecord’ failed: Error during WebSocket handshake: Unexpected response code: 200 翻译:WebSocket握手过程中出错:意外响应代码:200 代码实现 pom.xml...
  • websocket连接服务器获取mq消息测试 RabbitMQ监听消息 添加文章订阅监听 channel啊监听器啊等等 获取订阅类点赞类消息,然后可查询有多少条新消息 MyWebSocketHandler //约定用户第一次请求携带的数据:{"userId":...
  • 前台js打印websocket 关闭连接的错误信息: console.log('websocket 断开: ' + e.code + 'reason:' + e.reason + '是否刷新' + e.wasClean) 报错码是1006 此处为nginx服务器连接超时,主动断开连接,需要再nginx...
  • WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。...//websocket连接 var websocket = null; function websocketMsg() { //判断当前浏览器是否支持...
  • rxjava连接websocket

    2018-12-04 23:36:34
    基于okhttp和RxJava(RxJava1和RxJava2都支持)封装的WebSocket客户端,此库的核心特点是 除了手动关闭WebSocket(就是RxJava取消订阅),WebSocket异常关闭的时候(onFailure,发生异常,如WebSocketException等等),会自动...
  • websocket客户端与TCP服务器连接异常

    千次阅读 2017-08-11 06:41:15
    Uncaught InvalidStateError: Failed to ...1、服务器会收到客户端的连接 2、客户端不会收到服务器的握手返回,onopen函数不会被触发。 主要是websocket和tcp的握手不一致。需要将服务器的socket改成websock
  • 笔记 项目结构 代码 @Slf4j @Component @ServerEndpoint("/echo/{sid}") ... * concurrent包的线程安全Set,用来存放每个客户端对应的WebSocketServer对象 */ private static CopyOnWrite...
  • 转:http://www.searchtb.com/2012/08/websocket-introduction.html ocket: WebSocket 规范的目标是在浏览器中实现和服务器端双向通信....它是基于 TCP链接的 全双工通讯,但与普通的TCP又不同...基于 HTTP 长连接
  • 使用WebSocket,你的HTTP 请求变成打开WebSocket 连接WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称“SSL”))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一...
  • WebSocket握手图解:建立连接的步骤: pom文件中添加依赖 创建握手拦截器 创建WebSocket处理类 配置WebSocket 前端页面访问 项目目录结构: 1.pom文件中添加依赖<!-- springboot websocket --> <groupId>org....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,742
精华内容 6,696
关键字:

websocket连接异常