精华内容
下载资源
问答
  • WebSocket 前端使用

    千次阅读 2019-02-28 16:15:26
    h5提供了WebSocket网络协议,可以实现浏览器与服务器的双向数据传输 构造函数 WebSocket(url,protocol) url:WebSocket API URL,URL之前需要添加ws://或者wss://(类似http://、https://) protocol:与服务端定义的...

    h5提供了WebSocket网络协议,可以实现浏览器与服务器的双向数据传输

    构造函数

    WebSocket(url,protocol)
    url:WebSocket API URL,URL之前需要添加ws://或者wss://(类似http://、https://)
    protocol:与服务端定义的协议名称相同,协议的参数例如XMPP(Extensible Messaging and Presence Protocol)、SOAP(Simple Object Access Protocol)或者自定义协议。

      var ws = new WebSocket('ws://url', 'myprotocol');
      var ws = new WebSocket('ws://url', ['myprotocol','myprotovol2']);
    

    方法

    send(message) 通过已建立的websocket连接发送数据
    close(code(numerical),reason(string)) 关闭打开的websocket连接

    事件

    -WebSocket API是纯事件驱动,建立连接之后,可自动发送状态改变的数据和通知
    onopen 当建立websocket连接时触发,只触发一次
    onerror 当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件。
    onmessage 当服务端发送数据时触发,可多次触发,页面数据展示处理模块-实现轮询
    onclose 当websocket连接关闭时触发,只触发一次

    属性

    readyState: WebSocket连接状态
    0 正在与服务端建立WebSocket连接,还没有连接成功
    1 连接成功并打开,可以发送消息
    2 进行关闭连接的操作,且尚未关闭
    3 连接已关闭或不能打开

    bufferedAmount:检查传输数据的大小,当客户端传输大量数据时使用避免网络饱和

    protocol:在构造函数中使用,protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称,可以为空

    完整案例

    使用公开的“echo.websocket.org/echo” websocket接口服务写一个完整的案例

        var ws = new WebSocket('ws://echo.websocket.org/echo');
        console.log('ws连接状态:' + ws.readyState);
        //监听是否连接成功
        ws.onopen = function () {
            console.log('ws连接状态:' + ws.readyState);
            //连接成功则发送一个数据
            ws.send('test1');
        }
        //接听服务器发回的信息并处理展示
        ws.onmessage = function (data) {
            console.log('接收到来自服务器的消息:');
            console.log(data);
            //完成通信后关闭WebSocket连接
            ws.close();
        }
        //监听连接关闭事件
        ws.onclose = function () {
            //监听整个过程中websocket的状态
            console.log('ws连接状态:' + ws.readyState);
        }
        //监听并处理error事件
        ws.onerror = function (error) {
            console.log(error);
        }
    

    `
    websocket

    展开全文
  • WebSocket前端+vue

    2019-09-06 14:15:21
    WebSocket前端+vue 1.主要代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入样式--> <style> /* 屏蔽界面初始化闪跳 vue脚本闪跳*/ [v-cloak] { ...

    WebSocket前端+vue
    1.主要代码

    <!DOCTYPE html>
    <html>
    
    <head>
    	<meta charset="utf-8">
    	<!--引入样式-->
    	<style>
    		/* 屏蔽界面初始化闪跳 vue脚本闪跳*/
    		[v-cloak] {
    			display: none;
    		}
    	</style>
    </head>
    
    <body style="overflow:hidden" scroll="no">
    	<div id="WebSocket" style="overflow: hidden;" v-cloak>
    		<div>
    			<input type="text" v-model="text">
    			<button @click="send()">发送消息</button>
    			<br>
    			<button @click="closeWebSocket()">关闭websocket连接</button>
    			<br>		
    			<button @click="initWebSocket()">开启websocket连接</button>
    			<br>
    			<div>{{data}}</div>
    		</div>
    
    	</div>
    </body>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    	
    	var Main = new Vue({
    			el: '#WebSocket',
    	
    			//数据定义
    			data: function () {
    				return {
    					text: '',
    					data: '',
    					websocket: null,
    				}
    			},
    			//方法定义
    			methods: {			
    				initWebSocket() {
    					var _this=this;					
    					if ('WebSocket' in window) {
    						_this.websocket = new WebSocket('ws://localhost:9016/testWebsocket');	 				
    						//连接错误				   
    						_this.websocket.onerror = function() {
    							_this.data ='连接错误	状态码:' + _this.websocket.readyState;
    							//此时可以尝试刷新页面
    						};  		   
    						//连接成功
    						_this.websocket.onopen = function() {
    							_this.data ='连接成功	状态码:' + _this.websocket.readyState;
    						};  		   
    						//收到消息的回调
    						_this.websocket.onmessage = function(event) {
    							_this.data ='接收消息:'+event.data;
    						};  		   		   
    						//连接关闭的回调
    						_this.websocket.onclose = function() {
    							_this.data ='连接关闭	状态码:' + _this.websocket.readyState;
    						};
    						//监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    						window.onbeforeunload = function() {
    							_this.websocket.close()
    						};
    						
    					} else {
    					  alert('您的浏览器不支持WebSocket')
    					}						 				 
    				},	
    				//websocket发送消息
    				send() {
    					this.websocket.send(this.text);
    					this.text = '';
    				},
    				closeWebSocket() {
    					this.websocket.close();
    				}	
    			},
    			//界面初始化动作
    			created: function () {
    				this.initWebSocket();
    			},
    		});
    </script>
    </html>
    

    2.代码解读
    2.1连接和操作
    申请一个WebSocket对象,参数是需要连接的服务器端的地址,WebSocket协议的URL使用ws://开头

    _this.websocket = new WebSocket('ws://localhost:9016/testWebsocket');
    

    WebSocket对象一共支持四个消息 onopen, onmessage, onclose和onerror,我们所有的操作都是采用消息的方式触发的

    //连接错误				   
    _this.websocket.onerror = function() {
    	_this.data ='连接错误	状态码:' + _this.websocket.readyState;
    	//此时可以尝试刷新页面
    };  		   
    //连接成功
    _this.websocket.onopen = function() {
    	_this.data ='连接成功	状态码:' + _this.websocket.readyState;
    };  		   
    //收到消息的回调
    _this.websocket.onmessage = function(event) {
    	_this.data ='接收消息:'+event.data;
    };  		   		   
    //连接关闭的回调
    _this.websocket.onclose = function() {
    	_this.data ='连接关闭	状态码:' + _this.websocket.readyState;
    };
    

    2.2.WebSocket对象的对象特性
    send方法:
    send方法用于在WebSocket连接建立后,客户端向服务端发送消息

    this.websocket.send(this.text);
    

    close方法:
    close方法用于关闭连接

    this.websocket.close();
    

    readyState属性 :
    WebSocket通过只读特性readyState报告其连接状态,连接状态共有四个

    状态
    0连接正在进行中,但还未建立
    1连接已建立,消息可以开始传递
    2连接正在进行关闭
    3连接已关闭
    _this.websocket.readyState
    

    注:WebSocket的后端代码可参见这个链接:
    https://blog.csdn.net/qq_33435488/article/details/100574438

    展开全文
  • WebSocket前端代码

    2021-05-26 13:23:06
    <!... <... <head>...WebSocket</title> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="main" style="w
    <!DOCTYPE html>
    <html>
    
     <head>
      <meta charset="utf-8">
      <title>WebSocket</title>
      <script type="text/javascript" src="js/jquery.min.js"></script>
     </head>
    
     <body>
      <div id="main" style="width: 1200px;height:800px;"></div>
      Welcome<br/><input id="text" type="text" />
      <button onclick="send()">发送消息</button>
      <hr/>
      <button onclick="closeWebSocket()">关闭WebSocket连接</button>
      <hr/>
      <div id="message"></div>
     </body>
     <script type="text/javascript">
      var websocket = null;
      //判断当前浏览器是否支持WebSocket
      if('WebSocket' in window) {
       //改成你的地址
       websocket = new WebSocket("ws://192.168.100.196:8082/api/websocket/100");
      } else {
       alert('当前浏览器 Not support websocket')
      }
    
      //连接发生错误的回调方法
      websocket.onerror = function() {
       setMessageInnerHTML("WebSocket连接发生错误");
      };
    
      //连接成功建立的回调方法
      websocket.onopen = function() {
       setMessageInnerHTML("WebSocket连接成功");
      }
      var U01data, Uidata, Usdata
      //接收到消息的回调方法
      websocket.onmessage = function(event) {
       console.log(event);
       setMessageInnerHTML(event);
       setechart()
      }
    
      //连接关闭的回调方法
      websocket.onclose = function() {
       setMessageInnerHTML("WebSocket连接关闭");
      }
    
      //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
      window.onbeforeunload = function() {
       closeWebSocket();
      }
    
      //将消息显示在网页上
      function setMessageInnerHTML(innerHTML) {
       document.getElementById('message').innerHTML += innerHTML + '<br/>';
      }
    
      //关闭WebSocket连接
      function closeWebSocket() {
       websocket.close();
      }
    
      //发送消息
      function send() {
       var message = document.getElementById('text').value;
       websocket.send('{"msg":"' + message + '"}');
       setMessageInnerHTML(message + "&#13;");
      }
     </script>
    
    </html>
    
    展开全文
  • websocket前端页面与后台交互的例子,解压文件后,用idea导入项目,启动WebsocketServer类,接着用浏览器打开websocket.html页面,会看到建立连接,然后在发送框输入{"id":"1","type":"yes"},返回666,输入其他信息...
  • websocket前端页面

    2020-05-13 10:29:23
    <!... <... <head>...websocket通讯</title> </head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script> var socket; var us
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>websocket通讯</title>
    </head>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    var socket;
    	
    var userId;
    window.onload=function openSocket() {
    		
    	    userId=document.getElementById("userId")
    		userId.innerHTML=Math.ceil(Math.random()*200)
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else{
                console.log("您的浏览器支持WebSocket");
                //实现化WebSocket对象,指定要连接的服务器地址与端口  建立连接
                //等同于socket = new WebSocket("ws://localhost:8888/xxxx/im/25");
                //var socketUrl="${request.contextPath}/im/"+$("#userId").val();
                var socketUrl="http://192.168.110.224:9999/cmdi/monitorProjectStatus";
                socketUrl=socketUrl.replace("https","ws").replace("http","ws");
                console.log(socketUrl);
                if(socket!=null){
                    socket.close();
                    socket=null;
                }
                socket = new WebSocket(socketUrl);
                //打开事件
                socket.onopen = function() {
                    console.log("websocket已打开");
                    //socket.send("这是来自客户端的消息" + location.href + new Date());
                };
                //获得消息事件
                socket.onmessage = function(event) {
    				console.info(event.data)
    			    console.info(isJson(event.data))
    				//var msg;
    				//var content=document.getElementById("content")
    				//if(isJson(event.data)){
    				//    msg=JSON.parse(event.data);
    				//	if(msg.userList){
    				//		var onlineUsers=document.getElementById("onlineUsers")
    				//		onlineUsers.innerHTML=""
    				//		for(var item in msg.userList) {
    				//			onlineUsers.innerHTML= onlineUsers.innerHTML+"<input type='checkbox' name='onlineCheckBox' value="+msg.userList[item]+">" + msg.userList[item] +"</br>"
    				//			console.info("在线用户列表"+msg.userList[item] )
    				//		}
    				//	}else{
    				//		content.innerHTML=content.innerHTML+msg.userId  +":    " +msg.contentText + "</br>"
    				//	}
    				//}else{
    				//	content.innerHTML=content.innerHTML+ event.data  +"</br>"
    				//}
    				//content.scrollTop = content.scrollHeight;
    				
    				
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                socket.onclose = function() {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function() {
                    console.log("websocket发生了错误");
                }
            }
        }
    	
    	//判断是否为json串
        function isJson($string)
        {
            try {
                if(typeof JSON.parse($string) == 'object')
                    return true;
                return false;
            } catch (e) {
                console.log(e);
                return false;
     
            }
        }
    
        function sendMessage() {
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else {
    		
    			console.info(fun().length!=0)
    			if(fun().length!=0){
    			
    			    console.info('{"privateUsers":"'+check_val +  '"userId":"'+userId.innerHTML+'","contentText":"'+$("#contentText").val()+'"}');
    				socket.send('{"privateUsers":"'+ check_val + '","userId":"'+userId.innerHTML+'","contentText":"'+$("#contentText").val()+'"}');
    				console.info(check_val)
    			}else{
    			
    			 console.log("您的浏览器支持WebSocket");
                 console.log('{"userId":"'+userId.innerHTML+'","contentText":"'+$("#contentText").val()+'"}');
                 socket.send('{"userId":"'+userId.innerHTML+'","contentText":"'+$("#contentText").val()+'"}');
    			}
               
            }
        }
    	
    	
    	
    	//获取选中的checkbox
    	function fun(){
    		obj = document.getElementsByName("onlineCheckBox");
    		check_val = [];
    		for(k in obj){
    			if(obj[k].checked)
    				check_val.push(obj[k].value);
    		}
    		return check_val
    	}
    </script>
    <body>
    <div id="content"  style="overflow:auto; height: 200px; width: 400px; border: 1px solid #999;" > </div>
    <p>【UserId:】<span id="userId"></span></p>
    <div>【内容:】<input id="contentText" name="contentText" type="text" value="hello websocket"></div>
    <p>【操作】:<button onclick="sendMessage()">发送</button>
    <h4>在线用户列表</h4>
    <div id="onlineUsers"><div>
    
    </body>
    
    </html>
    
    
    展开全文
  • WebSocket 前端后端(nodejs) WebSocket是区别于HTTP/HTTPS的另外一种协议,目的是实现后端主动向前端发送数据,是一种TCP的...2. WebSocket前端简单代码 var ws = new WebSocket("ws://localhost:8080/msg"); w.
  • WebSocket 前端后端(nodejs)

    千次阅读 2018-11-14 17:36:46
    WebSocket是区别于HTTP/HTTPS的另外一种协议,目的是实现后端主动向前端发送数据,是一种TCP的连接。 1. WebSocket的前后端握手 WebSocket协议在握手连接... 2. WebSocket前端简单代码 var ws = new WebSocket...
  • 项目结构如下图: TestSocket.java package com.charles.socket; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websock...
  • WebSocket让web端与服务端维持一个有效的长连接,实现服务端主动推送数据。将二者一结合,业务系统信息流转通知功能完全就可以剥离出来。 架构图 JS Worker Worker工作在一个专用的作用域DedicatedWorkerGloba...
  • 采用websocket协议,前端以1M/s的速度发送图片的base64码给后端这种方式, websocket建立连接开始发送数据,大概几秒后,websocket就会断开连接, 如果此时再刷新页面尝试重新建立连接,tomcat有时会宕机。
  • Websocket前端代码示例

    2019-04-09 11:42:03
    <%@ page language="java" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head>...Websocket</title> </head> <body> 登录:<input id="user" type...
  • webSocket 前端如何实现

    2019-09-20 14:03:49
    //这里发送一个心跳,后端收到后,返回一个心跳消息, //onmessage拿到返回的心跳就说明连接正常 ws.send("我又来了~"); self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置,说明后端...
  • springBoot2.0对WebSocket的支持简直太棒了,直接就有包可以引入 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</...
  • 有时候我们要做一种实时展示数据的大屏展示页面,类似与...普通的ajax请求数据是单向的,也就是客户端(浏览器)主动像服务器发送请求,服务器响应,回传数据,展示页面! websocket是双向的,建立链接之后,服务器...
  • WebSocket 前端 Vue 长连接 断线重连

    千次阅读 2019-07-12 00:36:09
    文章目录WebSocket简介额外注意点实际开发代码创建WebSocket工具文件创建WebSocket连接初始化WebSocket心跳防止断开连接收到信息后区分业务信息和心跳信息定义关闭连接的方法,方便登出时使用将关闭和创建连接的方法...
  • 即时通讯vue 前端处理 export default class SocketService { /** * 单例 */ static instance = null static get Instance() { if (!this.instance) { this.instance = new SocketService() } return this....
  • 主要介绍了vue 实现websocket发送消息并实时接收消息,项目结合vue脚手架和websocket来搭建,本文给大家分享实例代码,需要的朋友可以参考下
  • python3.6版本用websocket通讯,前端发送英文信息到后台时正常,但若是发送中文就乱码。猜测recv(1024)接收报文后进行解析的时候无法正常的中文转码。有什么办法在解析报文时输出中文吗?
  • var websocket = {}; function openSocket() { var userId = document.getElementById('userId').value; if (userId == "" ) { console.warn("roleId, 不能为空") return; } if ('WebSocket' in window) {...
  • 基础入门-前端发送消息 在《WebSocket.之.基础入门-建立连接》的代码基础之上,进行添加代码。代码只改动了:TestSocket.java 和 index.jsp 两个文件。 项目结构如下图: TestSocket.java 1 package ...
  • 记录一下自己当初写websocket的时候遇到的问题 //下面这个是一个JS的方法,可以直接复制到HTML里面使用 心跳包也在里面 $(function () { var webSocket = null; var host = window.document.location.host; //...
  • 第一次使用WebSocket,出现很多问题:特此记录。 举例: 先声明一个websocket,创建websocket的对象: let webSocket = new WebSocket(“ws;//127.0.0.1:8800”)。 可以在浏览器上查看websocket的状态: 1、如果为0...
  • 后端nodejs代码 var express = require('express'); ... var WebSocket = require('ws'); var app = express(); app.use(express.static(__dirname)); var server = http.createServer(app); ...
  • 在(laravel框架)项目App\Console\Commands\Test下新建一个定时文件 如下:.../**websocket及时接受消息返回给前端 测试 * Class WorkermanCommand * @package App\Console\Commands\Test */ class WorkermanC.
  • 请点击以下链接跳转至本人博客园对应文章:SSM框架下使用websocket实现后端发送消息前端
  • 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8">...WebSocket测试</title> </head> <body> <p>WebSocket</p> &l...
  • 1.websocket 1、websocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 2、websocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。 3、websocket中,浏览器和...
  • webSocket前端开发实现+心跳检测机制

    万次阅读 2019-01-04 17:02:18
    最近项目用到了webSocket实时通信机制,将过程中遇到的麻烦和坑做一下记录 首先,了解一下webSocket是什么?它是一种网络通信协议,是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。 为什么要使用...
  • <pre><code>conn = new WebSocket('ws://websocket.develop.local:8080'); conn.onopen = function(e) { console.log("Connection established!"); }; conn.onmessage = function(e) { console.log('ada ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,424
精华内容 8,169
关键字:

websocket前端发送消息