wordpress建站论坛,网站建设自己怎么做,WORDPRESS免费中国主题,asp做微网站Websocket
1.基本概念
WebSocket是一种网络通信协议。
websocket和http 的区别#xff0c;http的缺陷#xff0c;只能从客户端发起请求#xff08;单项请求#xff09;不能从服务器发起请求。如果服务器有连续性的变化时#xff0c;如果我们想要每一个时刻都获得最新的…Websocket
1.基本概念
WebSocket是一种网络通信协议。
websocket和http 的区别http的缺陷只能从客户端发起请求单项请求不能从服务器发起请求。如果服务器有连续性的变化时如果我们想要每一个时刻都获得最新的数据时就需要不断的由客户端发起请求不停的发起连接就会浪费很大一部分资源。
所以websocket的诞生就是为了解决之一问题使得服务器也可以向客户端发起请求~实现网站实时推送的需求
websocket的特点
1.建立在tcp协议之上
2.兼容http协议握手阶段采用http协议。
3.数据格式轻量级可以发送文本还可以发送二进制数据
5.没有同源限制客户端可以和任意服务器通信
协议标识ws加密后为wss
总结websocket是一种网络协议支持服务器与客户端的全双工连接。
websocket前端往后端发送数据 socket.send(这是来自客户端的消息);执行socket.send后对应着后端的WebSocketService.onMessage事件
websocket同时还定义了几个监听函数 1、onopen 当网络连接建立时触发该事件 2、onerror 当网络发生错误时触发该事件 3、onclose 当websocket被关闭时触发该事件 4、onmessage 当websocket接收到服务器发来的消息的时触发的事件。
在后端我们可以新建一个WebSocketService类来做整对websocket的以上四种状态来执行以下业务逻辑。
但在这之前需要导入websocket的依赖以及配置文件很简单
dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId
/dependencyConfiguration
public class WebSocketConfig{Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}然后前端写的四个状态与后端定义的相对于
Service
ServerEndpoint(/imServer/{username})
public class WebSocketService {public static PlayerService playerService;/**统计在线的人数*/private static int onlineCount 0;/**concurrent包的线程安全Set用来存放每个客户端对应的MyWebSocket对象。*/private static ConcurrentHashMapString,WebSocketService webSocketMap new ConcurrentHashMap();/**与某个客户端的连接会话需要通过它来给客户端发送数据*/private Session session;/**接收userId*/private String userId;OnOpenpublic void onOpen(Session session, PathParam(username) String username){}OnClosepublic void onClose() throws IOException {}OnMessagepublic void onMessage(String message, Session session) throws IOException {}/*** 通过遍历webSocketMap当前在线人数的session向每一个在线用户推送消息* 实现服务器主动推送*/public void sendMessage(String message) throws IOException {for (String s : webSocketMap.keySet()) {webSocketMap.get(s).session.getBasicRemote().sendText(message);}}/*** 发送自定义消息* */public static void sendInfo(String message,PathParam(username) String toUsername) throws IOException {if(webSocketMap.containsKey(toUsername)){webSocketMap.get(toUsername).sendMessage(message);}else{System.out.println(用户toUsername,不在线);}}public static synchronized void addOnlineCount() {WebSocketService.onlineCount;}public static synchronized void subOnlineCount() {WebSocketService.onlineCount--;}public static synchronize int getOnlineCount() {return onlineCount;}
}ServerEndpoint(/imServer/{username})则表示前端在新建websocket的连接时需要的url
对应这里我写的前端代码就是
let urlhttp://localhost:8082/imServer/username;
urlurl.replace(https,ws).replace(http,ws);
socket new WebSocket(url);
//打开事件
socket.onopen function() {};
//获得消息事件
socket.onmessage function(msg) {};
//关闭事件
socket.onclose function(msg) {};
//发生了错误事件
socket.onerror function() {
}后端业务可以通过sendMessage方法向前端传送数据包括字符串、对象、二进制位、文件。
后端sendMessage传来的数据时就会执行socket.onmessage里面的代码 一.WebSocket与传统的异同点
参考文章http://blog.jobbole.com/106009/
短答案
就像Java和JavaScript并没有什么太大的关系但又不能说完全没关系。可以这么说
命名方面Socket是一个深入人心的概念WebSocket借用了这一概念使用方面完全两个东西。
长答案
Socket可以有很多意思和IT较相关的本意大致是指 在端到端的一个连接中这两个端叫做Socket 。对于IT从业者来说它往往指的是TCP/IP网络环境中的两个连接端大多数的API提供者如操作系统JDK往往会提供基于这种概念的接口所以对于开发者来说也往往是在说一种编程概念。同时操作系统中进程间通信也有Socket的概念但这个Socket就不是基于网络传输层的协议了。
网络中的 Socket
通常所说的Socket API是指操作系统中也可能不是操作系统提供的对于传输层TCP/UDP抽象的接口。现行的Socket API大致都是遵循了BSD Socket规范包括Windows。这里称规范其实不太准确规范其实是POSIX但BSD Unix中对于Socket的实现被广为使用所以成为了实际的规范。如果你要使用HTTP来构建服务那么就不需要关心Socket如果你想基于TCP/IP来构建服务那么Socket可能就是你会接触到的API。
Socket
历史中使用到的Socket包括TCP文档中使用到的Socket其实指的是网络传输中的一端是一个虚拟化的概念。也算是一种编程的思想。
WebSocket
w3c放弃了HTML然后有一群人也有说是这些人供职的公司不过官方的文档上是说的个人创立了WHATWG组织来推动HTML语言的继续发展同时他们还发展了很多关于Web的技术标准这些标准不断地被官方所接受。WebSocket就属于WHATWG发布的Web Application的一部分即HTML5的产物。
结论
可以把WebSocket想象成HTTPHTTP和Socket什么关系WebSocket和Socket就是什么关系。
也可以理解为
Socket其实并不是一个协议而是为了方便使用TCP或UDP而抽象出来的一层是位于应用层和传输控制层之间的一组接口。 Socket是应用层与TCP/IP协议族通信的中间软件抽象层它是一组接口。在设计模式中Socket其实就是一个门面模式它把复杂的TCP/IP协议族隐藏在Socket接口后面对用户来说一组简单的接口就是全部让Socket去组织数据以符合指定的协议。 当两台主机通信时必须通过Socket连接Socket则利用TCP/IP协议建立TCP连接。TCP连接则更依靠于底层的IP协议IP协议的连接则依赖于链路层等更低层次。
WebSocket则是一个典型的应用层协议。
Socket是传输控制层协议WebSocket是应用层协议。
websocket详解
随着互联网的发展传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来随着HTML5的诞生WebSocket协议被提出
它实现了浏览器与服务器的全双工通信扩展了浏览器与服务端的通信功能使服务端也能主动向客户端发送数据。
我们知道传统的HTTP协议是无状态的每次请求request都要由客户端如 浏览器主动发起服务端进行处理后返回response结果而服务端很难主动向客户端发送数据这种客户端是主动方服务端是被动方的传统Web模式 对于信息变化不频繁的Web应用来说造成的麻烦较小而对于涉及实时信息的Web应用却带来了很大的不便如带有即时通信、实时数据、订阅推送等功能的应 用。在WebSocket规范提出之前开发人员若要实现这些实时性较强的功能经常会使用折衷的解决方法轮询polling和Comet技术。其实后者本质上也是一种轮询只不过有所改进。
轮询是最原始的实现实时Web应用的解决方案。轮询技术要求客户端以设定的时间间隔周期性地向服务端发送请求频繁地查询是否有新的数据改动。明显地这种方法会导致过多不必要的请求浪费流量和服务器资源。
Comet技术又可以分为长轮询和流技术。长轮询改进了上述的轮询技术减小了无用的请求。它会为某些数据设定过期时间当数据过期后才会向服务端发送请求这种机制适合数据的改动不是特别频繁的情况。流技术通常是指客户端使用一个隐藏的窗口与服务端建立一个HTTP长连接服务端会不断更新连接状态以保持HTTP长连接存活这样的话服务端就可以通过这条长连接主动将数据发送给客户端流技术在大并发环境下可能会考验到服务端的性能。
这两种技术都是基于请求-应答模式都不算是真正意义上的实时技术它们的每一次请求、应答都浪费了一定流量在相同的头部信息上并且开发复杂度也较大。
伴随着HTML5推出的WebSocket真正实现了Web的实时通信使B/S模式具备了C/S模式的实时通信能力。WebSocket的工作流程是这 样的浏览器通过JavaScript向服务端发出建立WebSocket连接的请求在WebSocket连接建立成功后客户端和服务端就可以通过 TCP连接传输数据。因为WebSocket连接本质上是TCP连接不需要每次传输都带上重复的头部数据所以它的数据传输量比轮询和Comet技术小 了很多。
JavaEE 7中出了JSR-356:Java API for WebSocket规范。不少Web容器如Tomcat,Nginx,Jetty等都支持WebSocket。Tomcat从7.0.27开始支持 WebSocket从7.0.47开始支持JSR-356下面的Demo代码也是需要部署在****Tomcat7.0.47****以上的版本才能运行。
二.WebSocket示例
首先建一个javaxiangm
在pom.xml中添加Jar包依赖
dependencygroupIdjavax/groupIdartifactIdjavaee-api/artifactIdversion7.0/versionscopeprovided/scope
/dependency客户端Web主页代码
% page languagejava pageEncodingUTF-8 %
!DOCTYPE html
html
headtitleJava后端WebSocket的Tomcat实现/title
/head
body
h2Hello World!/h2
webSocket测试
div请输入发送内容:input typetext idsendContentbutton idsend οnclicksend()发送消息/buttonhr
/div
divbutton οnclickcloseWebSocket()关闭webSocket连接/button
/div
label消息记录:/label
div idmessage
/div
/body
script src./js/jquery-3.2.1.min.js/script
script typetext/javascriptfunction myBrowser(){var userAgent navigator.userAgent; //取得浏览器的userAgent字符串var isOpera userAgent.indexOf(Opera) -1;//判断是否Opera浏览器if (isOpera) {return Opera};//判断是否Firefox浏览器if (userAgent.indexOf(Firefox) -1) {return Firefox;}//判断谷歌if (userAgent.indexOf(Chrome) -1){return Chrome;}//判断是否Safari浏览器if (userAgent.indexOf(Safari) -1) {return Safari;}//判断是否IE浏览器if (userAgent.indexOf(compatible) -1 userAgent.indexOf(MSIE) -1 !isOpera) {return IE;};}//发送按钮保持选中$(document).keydown(function(event) {if (event.keyCode 13) {$(#send).click();}});$(document).ready(function(){$(div).css(margin-top,50px);})var webSocket null;//判断浏览器是否支持webSocket通信if(WebSocket in window){webSocket new WebSocket(ws://localhost:8080/webSocket);}else{alert(您的浏览器不支持webSocket通信,请升级浏览器或更换浏览器重试)}console.log(webSocket);//连接发生错误的回调方法webSocket.onerror function () {setMessageInnerHTML(WebSocket连接发生错误);};//连接成功建立的回调方法webSocket.onopen function () {setMessageInnerHTML(WebSocket连接成功);}//接收到消息的回调方法webSocket.onmessage function (event) {var message $(#message).html();setMessageInnerHTML(messageevent.databr/);}//连接关闭的回调方法webSocket.onclose function () {setMessageInnerHTML(WebSocket连接关闭);}//监听窗口关闭事件当窗口关闭时主动去关闭websocket连接防止连接还没断开就关闭窗口server端会抛异常。window.onbeforeunload function () {closeWebSocket();}//将消息显示在网页上function setMessageInnerHTML(innerHTML) {$(#message).html(innerHTMLbr/)}//关闭WebSocket连接function closeWebSocket() {webSocket.close();}//发送消息function send() {var browser myBrowser()var message $(#sendContent).val();webSocket.send(browser: message);}/script
/htmlJava Web后端代码
package com.deng.websocket;/*** Created by surplusDeng on 2017/10/27.*/import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;/*** ServerEndpoint 注解是一个类层次的注解它的功能主要是将目前的类定义成一个websocket服务器端,* 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端*/
ServerEndpoint(/webSocket)
public class WebSocketTest {//静态变量用来记录当前在线连接数。应该把它设计成线程安全的。private static int onlineCount 0;//concurrent包的线程安全Set用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话可以使用Map来存放其中Key可以为用户标识private static CopyOnWriteArraySetWebSocketTest webSocketSet new CopyOnWriteArraySetWebSocketTest();//与某个客户端的连接会话需要通过它来给客户端发送数据private Session session;/*** 连接建立成功调用的方法* param session 可选的参数。session为与某个客户端的连接会话需要通过它来给客户端发送数据*/OnOpenpublic void onOpen(Session session){this.session session;webSocketSet.add(this); //加入set中addOnlineCount(); //在线数加1System.out.println(有新连接加入当前在线人数为 getOnlineCount());}/*** 连接关闭调用的方法*/OnClosepublic void onClose(){webSocketSet.remove(this); //从set中删除subOnlineCount(); //在线数减1System.out.println(有一连接关闭当前在线人数为 getOnlineCount());}/*** 收到客户端消息后调用的方法* param message 客户端发送过来的消息* param session 可选的参数*/OnMessagepublic void onMessage(String message, Session session) {System.out.println(来自客户端的消息: message);//群发消息for(WebSocketTest item: webSocketSet){try {item.sendMessage(message);} catch (IOException e) {e.printStackTrace();continue;}}}/*** 发生错误时调用* param session* param error*/OnErrorpublic void onError(Session session, Throwable error){System.out.println(发生错误);error.printStackTrace();}/*** session.getBasicRemote().sendText(message)发送消息到客户端getBasicRemote同步getAsyncRemote异步* 这个方法与上面几个方法不一样。没有用注解是根据自己需要添加的方法。* param message* throws IOException*/public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);//this.session.getAsyncRemote().sendText(message);}public static synchronized int getOnlineCount() {return onlineCount;}public static synchronized void addOnlineCount() {WebSocketTest.onlineCount;}public static synchronized void subOnlineCount() {WebSocketTest.onlineCount--;}}
