`

WebSocket

 
阅读更多

WebSocket是什么?

WebSocket是一种在单个TCP连接上进行全双向通信的协议。
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。
在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
Websocket 通过HTTP/1.1 协议的101状态码进行握手。

 

握手

在客户端,new WebSocket实例化一个新的WebSocket客户端对象,请求类似 ws://yourdomain:port/path 的服务端WebSocket URL,客户端WebSocket对象会自动解析并识别为WebSocket请求,并连接服务端端口,执行双方握手过程,客户端发送数据格式类似:

可以看到,客户端发起的WebSocket连接报文类似传统HTTP报文,Upgrade:websocket参数值表明这是WebSocket类型请求,Sec-WebSocket-Key是WebSocket客户端发送的一个 base64编码的密文,要求服务端必须返回一个对应加密的Sec-WebSocket-Accept应答,否则客户端会抛出Error during WebSocket handshake错误,并关闭连接。

服务端收到报文后返回的数据格式类似:

 Sec-WebSocket-Accept的值是服务端采用与客户端一致的密钥计算出来后返回客户端的,HTTP/1.1 101 Switching Protocols表示服务端接受WebSocket协议的客户端连接,经过这样的请求-响应处理后,两端的WebSocket连接握手成功, 后续就可以进行TCP通讯了。

 

保持长连接

服务器和客户端通过发送Ping/Pong+Frame(RFC+6455+-+The+WebSocket+Protocol)。这种 Frame+是一种特殊的数据包,它只包含一些元数据而不需要真正的 Data+Payload,可以在不影响应用的情况下维持住中间网络的连接状态。

 

例子1

 

pom文件:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>1.3.5.RELEASE</version>
</dependency>

 

java:

package com.test;

import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

@ServerEndpoint(value = "/websocket")
@Component
public class WebSocketController {
    //当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;

    //concurrent包的线程安全Set,用来存放每个客户端对应的WebSocket对象。
    private static CopyOnWriteArraySet<WebSocketController> webSocketSet = new CopyOnWriteArraySet<WebSocketController>();

    //与某个客户端的连接会话,需要通过它来给客户端发送数据
    private Session session;

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        webSocketSet.add(this);//加入set中
        addOnlineCount();//在线数加1
        System.out.println("有新连接加入!当前在线人数为" + getOnlineCount());
        try {
            sendMessage("init success!");
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        webSocketSet.remove(this);//从set中删除
        subOnlineCount();//在线数减1
        System.out.println("有一连接关闭!当前在线人数为" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        System.out.println("来自客户端的消息:" + message);
        try {
            session.getBasicRemote().sendText("service:"+message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 发生错误时调用
     */
     @OnError
     public void onError(Session session, Throwable error) {
        System.out.println("发生错误");
        error.printStackTrace();
     }

    /**
     * 发送消息
     */
     public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
     }

     /**
      * 群发自定义消息
      */
    public static void sendInfo(String message) {
        if(webSocketSet!=null && webSocketSet.size()>0) {
            for (WebSocketController item : webSocketSet) {
                try {
                    item.sendMessage(message);
                } catch (IOException e) {
                    e.printStackTrace();
                    continue;
                }
            }
        }
    }

    public static synchronized int getOnlineCount() {
        return onlineCount;
    }

    public static synchronized void addOnlineCount() {
        WebSocketController.onlineCount++;
    }

    public static synchronized void subOnlineCount() {
        WebSocketController.onlineCount--;
    }
}

 

package com.test;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

 

html:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>

<body>
    Welcome Use WebSocket<br/>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message"></div>
</body>
<script type="text/javascript">
    var websocket = null;

    //判断当前浏览器是否支持WebSocket
    if('WebSocket' in window){
        websocket = new WebSocket("ws://localhost:8080/websocket");
    } else{
        alert('Not support websocket')
    }

    //连接发生错误的回调方法
    websocket.onerror = function(){
        setMessageInnerHTML("error");
    };

    //连接成功建立的回调方法
    websocket.onopen = function(event){
        setMessageInnerHTML("open");
    }

    //接收到消息的回调方法
    websocket.onmessage = function(event){
        setMessageInnerHTML(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function(){
        setMessageInnerHTML("close");
    }

    //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function(){
        websocket.close();
    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML){
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    //关闭连接
    function closeWebSocket(){
        websocket.close();
    }

    //发送消息
    function send(){
        var message = document.getElementById('text').value;
        websocket.send(message);
    }
</script>
</html>

 

 

例子2(一个websocket分发多个功能,通过参数区分)

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
    <version>1.3.5.RELEASE</version>
</dependency>

 

package com.cuc.happyseat.config.websocket;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * 开启WebSocket支持
 */
@Configuration  
public class WebSocketConfig {  
    
    @Bean  
    public ServerEndpointExporter serverEndpointExporter() {  
        return new ServerEndpointExporter();  
    }  
  
}

 

WebSocket服务类对照下面的代码看:

第20行,@ServerEndpoint("/websocket/{userID}"),括号中的内容就是客户端请求Socket连接时的访问路径,userID是我要求客户端传来的参数,我这里算是为了标识该客户端吧。
第28行,在该类中添加属性 userID,并添加对应的getUserID()方法。
第46行,在onOpen()方法即建立连接的时候就接收参数userID,需要标识@PathParam("userID") 。接收参数后直接赋值给属性userID。
第140-157行,是针对特定客户端发送消息。服务器和客户端在建立连接成功后就生成了一个WebSocket对象,并存在集合中,对象里特有的属性是我们设置的userID。所以通过唯一的userID就能标识服务器与该客户端建立的那个连接啦!这样要求发送消息时,传入userID与消息,服务器在自己的WebSocket连接集合中遍历找到对应客户端的连接,就可以直接发消息过去啦~~

package com.cuc.happyseat.websocket;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.EncodeException;
import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import org.springframework.stereotype.Component;

/*@ServerEndpoint注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端,
 * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端
*/
@ServerEndpoint("/websocket/{userID}")
@Component
public class WebSocketServer {

	//每个客户端都会有相应的session,服务端可以发送相关消息
	private Session session;

	//接收userID
	private Integer userID;
 
	//J.U.C包下线程安全的类,主要用来存放每个客户端对应的webSocket连接
	private static CopyOnWriteArraySet<WebSocketServer> copyOnWriteArraySet = new CopyOnWriteArraySet<WebSocketServer>();

	public Integer getUserID() {
		return userID;
	}
    
	/**
	 * @Name:onOpen
	 * @Description:打开连接。进入页面后会自动发请求到此进行连接
	 * @Author:mYunYu
	 * @Create Date:14:46 2018/11/15
	 * @Parameters:@PathParam("userID") Integer userID
	 * @Return:
	 */
	@OnOpen
	public void onOpen(Session session, @PathParam("userID") Integer userID) {
		this.session = session;
		this.userID = userID;
		System.out.println(this.session.getId());
		copyOnWriteArraySet.add(this);
	}

	/**
	 * @Name:onClose
	 * @Description:用户关闭页面,即关闭连接
	 * @Author:mYunYu
	 * @Create Date:14:46 2018/11/15
	 * @Parameters:
	 * @Return:
	 */
	@OnClose
	public void onClose() {
		copyOnWriteArraySet.remove(this);
	}

	/**
	 * @Name:onMessage
	 * @Description:测试客户端发送消息,测试是否联通
	 * @Author:mYunYu
	 * @Create Date:14:46 2018/11/15
	 * @Parameters:
	 * @Return:
	 */
	@OnMessage
	public void onMessage(String message) {
		System.out.println("websocket收到客户端发来的消息:"+message);
	}

	/**
	 * @Name:onError
	 * @Description:出现错误
	 * @Author:mYunYu
	 * @Create Date:14:46 2018/11/15
	 * @Parameters:
	 * @Return:
	 */
	@OnError
	public void onError(Session session, Throwable error) {
		System.out.println("发生错误:" + error.getMessage() + "; sessionId:" + session.getId());
		error.printStackTrace();
	}

	public void sendMessage(Object object){
		//遍历客户端
		for (WebSocketServer webSocket : copyOnWriteArraySet) {
			System.out.println("websocket广播消息:" + object.toString());
			try {
				//服务器主动推送
				webSocket.session.getBasicRemote().sendObject(object) ;
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	/**
	 * @Name:sendMessage
	 * @Description:用于发送给客户端消息(群发)
	 * @Author:mYunYu
	 * @Create Date:14:46 2018/11/15
	 * @Parameters:
	 * @Return:
	 */
	public void sendMessage(String message) {
		//遍历客户端
		for (WebSocketServer webSocket : copyOnWriteArraySet) {
			System.out.println("websocket广播消息:" + message);
			try {
				//服务器主动推送
				webSocket.session.getBasicRemote().sendText(message);
			} catch (Exception e) {
				e.printStackTrace();
			}
		}
	}

	/**
	 * @throws Exception 
	 * @Name:sendMessage
	 * @Description:用于发送给指定客户端消息
	 * @Author:mYunYu
	 * @Create Date:14:47 2018/11/15
	 * @Parameters:
	 * @Return:
	 */
	public void sendMessage(Integer userID, String message) throws Exception {
		Session session = null;
		WebSocketServer tempWebSocket = null;
		for (WebSocketServer webSocket : copyOnWriteArraySet) {
			if (webSocket.getUserID() == userID) {
				tempWebSocket = webSocket;
				session = webSocket.session;
				break;
			}
		}
		if (session != null) {
			//服务器主动推送
			tempWebSocket.session.getBasicRemote().sendText(message);
		} else {
			System.out.println("没有找到你指定ID的会话:{}"+ "; userId:" + userID);
		}
	}    
}

 

  • 大小: 42.6 KB
  • 大小: 30.4 KB
分享到:
评论

相关推荐

    基于WebAssembly和WebSocket的前端播放器

    基于WebAssembly和WebSocket的前端播放器 通过WebSocket协议,将视频流从回调函数取出通过Wasm解码在前端播放 WebSocket客户端文件夹是参考资料,可看可不看(感兴趣的可以瞅一眼)。 JSWebSocket文件夹中是完整的...

    详解微信小程序实现WebSocket心跳重连

    最近在开发小程序用到了WebSocket,小程序提供了相应的原生API,与H5的API使用方式上有一些区别,所以流行的H5的一些成熟的类库使用起来有些困难,而原生API又存在一些缺陷,所以就自己实现了一套心跳重连机制。...

    javax.websocket-api-1.1-API文档-中文版.zip

    赠送jar包:javax.websocket-api-1.1.jar; 赠送原API文档:javax.websocket-api-1.1-javadoc.jar; 赠送源代码:javax.websocket-api-1.1-sources.jar; 赠送Maven依赖信息文件:javax.websocket-api-1.1.pom; ...

    jakarta.websocket-api-1.1.2-API文档-中文版.zip

    赠送jar包:jakarta.websocket-api-1.1.2.jar; 赠送原API文档:jakarta.websocket-api-1.1.2-javadoc.jar; 赠送源代码:jakarta.websocket-api-1.1.2-sources.jar; 赠送Maven依赖信息文件:jakarta.websocket-api...

    websocket-api-9.4.11.v20180605-API文档-中文版.zip

    赠送jar包:websocket-api-9.4.11.v20180605.jar; 赠送原API文档:websocket-api-9.4.11.v20180605-javadoc.jar; 赠送源代码:websocket-api-9.4.11.v20180605-sources.jar; 赠送Maven依赖信息文件:websocket-...

    jakarta.websocket-api-1.1.2-API文档-中英对照版.zip

    赠送jar包:jakarta.websocket-api-1.1.2.jar; 赠送原API文档:jakarta.websocket-api-1.1.2-javadoc.jar; 赠送源代码:jakarta.websocket-api-1.1.2-sources.jar; 赠送Maven依赖信息文件:jakarta.websocket-api...

    微信小程序webSocket的使用方法

    本篇博客介绍微信小程序中webSocket的使用方法,以及如何用局部网络建立webSocket连接,进行客户端与服务器之间的对话: webSocket简介 微信小程序端API调用 服务器端使用nodejs配置 演示websocket webSocket...

    jmeter4.0加插件websocket包,共7个,完整

    可用于 websocket接口测试! Jmeter的WebSocket协议支持插件: JMeterWebSocketSampler-1.0.2-SNAPSHOT.jar 所需依赖包: 1、jetty-http-9.1.2.v20140210.jar 2、jetty-io-9.1.2.v20140210.jar 3、jetty-util-9.1.2....

    java-websocket-1.3.0.jar

    websocket

    java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统.zip

    Java开发基于SpringBoot+WebSocket+Redis分布式即时通讯群聊系统。一个基于Spring Boot + WebSocket + Redis,可快速开发的分布式即时通讯群聊系统。适用于直播间聊天、游戏内聊天、客服聊天等临时性群聊场景。 ...

    websocket-cluster:这是一个针对WebSocket集群服务器的Spring Cloud项目。

    实战Spring Cloud的WebSocket体现此项目是一个WebSocket实施的实践,基于Spring Cloud。原理我们利用一致性哈希算法,构造一个哈希环,网关监听WebSocket服务实例的上下线消息,根据实例的变化动态地更新哈希环。将...

    基于Vertx实现的websocket消息服务,支持集群部署

    基于Vertx实现的websocket消息服务,支持集群部署。 启动步骤 mvn package 修改default-zookeeper.json自定义zookeeper地址。 修改default-websocket.json自定义websocket服务配置,包括: serverCode:服务名称 ...

    DelphiWebsockets-master.zip_delphi websocket_websocket_websocket

    WebSocket for Delphi

    websocket实现前后台数据更新

    1、前端页面 ... 2、javascript websocket.js,websocket页面使用javascript...WebSocketServer.java、WebSocketConfig.java 定义后台onopen、onmessage、onclose、onerror函数及信息发送函数,提供给websoceket功能支持。

    一个简单的网页 Websocket 连接并实现心跳 Heartbeat

    let ws = new WebSocket('wss://echo.websocket.org/'); 然后是通过回调函数获取服务器消息以及对连接状态进行捕捉。 // 成功连接时触发 ws.onopen = () =&gt; { console.log('连接成功.'); this.send('{event:...

    websocket_for_linux-master_websocket_websocket客户端_WEBSOCKET单片机实现

    5WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。...

    基于node+vue实现简单的WebSocket聊天功能

    首先,我需要用到node的nodejs-websocket模块 使用yarn进行安装 yarn add nodejs-websocket –save 当然,你也可以用npm进行安装 npm i nodejs-websocket –save 安装完毕之后,我们开始写服务端的代码,首先,...

    SuperSocket_WebSocket_WebSocket4Net服务器需要的DLL

    基于SuperSocket的服务器 和 客户端程序 所需要的...只需要引用 WebSocket4Net -------------------------- 本人菜鸟一枚,抛砖引入,欢迎一起来研究这个Socket开发框架 QQ:2360450496 SuperSocket官方QQ群373076764

    Uniapp使用GoEasy实现websocket实时通讯

    Uniapp作为近来最火的移动端开发技术,一套代码,可以打包成Android/iOS app和各种平台的小程序,可谓是没有最方便只有更方便。 GoEasy上架DCloud Uniapp...Uniapp官方的websocket API主要是用来与您的websocket服务

    Android 实现WebSocket长连接

    Android 实现WebSocket长连接 最近项目中引入了实时接收服务器数据的功能,考量后通过WebSocket长链接来实现。 1、建立在 TCP 协议之上,服务器端的实现比较容易。 2、与 HTTP 协议有着良好的兼容性。默认端口也是80...

Global site tag (gtag.js) - Google Analytics