websocket 订阅
WebSocket 展开全文
WebSocket
信息
操作系统
跨平台
开发语言
JavaHTML/CSS查看源码 »
开源协议
未知
WebSocket
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。 WebSocket通信协议于2011年被IETF定为标准 RFC 6455 ,WebSocketAPI 被 W3C 定为标准。 在 WebSocket API 中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 现在,很多网站为了实现即时通讯(real-time),所用的技术都是轮询(polling)。轮询是在特定的的时间间隔(time interval)(如每1秒),由浏览器对服务器发出HTTP request,然后由服务器返回最新的数据给客服端的浏览器。这种传统的HTTP request d的模式带来很明显的缺点 – 浏览器需要不断的向服务器发出请求(request),然而HTTP request 的header是非常长的,里面包含的数据可能只是一个很小的值,这样会占用很多的带宽。 而最比较新的技术去做轮询的效果是Comet – 用了AJAX。但这种技术虽然可达到全双工通信,但依然需要发出请求(reuqest)。 在 WebSocket API,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中,为我们实现即使服务带来了两大好处: 1. Header 互相沟通的Header是很小的-大概只有 2 Bytes 2. Server Push 服务器可以主动传送数据给客户端
收起全文
精华内容
参与话题
问答
  • 网络协议、socket、webSocket

    万次阅读 多人点赞 2019-07-31 19:20:28
    一、网络协议 网络协议为计算机网络中进行数据交换而建立的规则、标准或约定的集合。 1、OSI七层协议 OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范。OSI模型有7层结构,从上到下分别...

    一、网络协议

    网络协议为计算机网络中进行数据交换而建立的规则、标准或约定的集合。

    1、OSI七层协议

    OSI是一个开放性的通信系统互连参考模型,他是一个定义得非常好的协议规范。OSI模型有7层结构,从上到下分别是 7 应用层 6 表示层 5 会话层 4 传输层 3 网络层 2 数据链路层 1 物理层。

    下面的图表显示不同的协议在最初OSI模型中的位置:

    7 应用层 例如HTTP、SMTP、SNMP、FTP、Telnet、SIP、SSH、NFS、RTSP、XMPP、Whois、ENRP

    6 表示层 例如XDR、ASN.1、SMB、AFP、NCP

    5 会话层 例如ASAP、TLS、SSH、ISO 8327 / CCITT X.225、RPC、NetBIOS、ASP、Winsock、BSD sockets

    4 传输层 例如TCP、UDP、RTP、SCTP、SPX、ATP、IL

    3 网络层 例如IP、ICMP、IGMP、IPX、BGP、OSPF、RIP、IGRP、EIGRP、ARP、RARP、 X.25

    2 数据链路层 例如以太网、令牌环、HDLC、帧中继、ISDN、ATM、IEEE 802.11、FDDI、PPP

    1 物理层 例如线路、无线电、光纤、信鸽

    2、TCP/IP协议组

    TCP/IP(Transmission Control Protocol/Internet Protocol)即传输控制协议/网间协议,定义了主机如何连入因特网及数据如何在它们之间传输的标准,从字面意思来看TCP/IP是TCP和IP协议的合称,但实际上TCP/IP协议是指因特网整个TCP/IP协议族。不同于ISO模型的七个分层,TCP/IP协议参考模型把所有的TCP/IP系列协议归类到四个抽象层中。

    应用层:TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 等等

    传输层:TCP,UDP

    网络层:IP,ICMP,OSPF,EIGRP,IGMP

    数据链路层:SLIP,CSLIP,PPP,MTU

    3、OSI七层和TCP/IP四层的关系

    3.1 OSI引入了服务、接口、协议、分层的概念,TCP/IP借鉴了OSI的这些概念建立TCP/IP模型。

    3.2 OSI先有模型,后有协议,先有标准,后进行实践;而TCP/IP则相反,先有协议和应用再提出了模型,且是参照的OSI模型。

    3.3 OSI是一种理论下的模型,而TCP/IP已被广泛使用,成为网络互联事实上的标准。

    3.4 OSI的应用层、表示层、会话层可以算到TCP/IP的应用层里。

    4、总结

    每一抽象层建立在低一层提供的服务上,并且为高一层提供服务。

    通过上述介绍,就可以搞清楚例如HTTP协议和TCP协议的区别之类的问题了。TPC协议是一种传输层协议,主要解决数据如何在网络中传输,而HTTP协议是应用层协议,主要解决如何包装数据。关于TCP和HTTP协议的关系,网上有一段比较容易理解的介绍:“我们在传输数据时,可以直接使用(传输层)TCP协议,但是那样的话,如果没有应用层,便无法识别数据内容,如果想要使传输的数据有意义,则必须使用到应用层协议,应用层协议有很多,比如HTTP、FTP、TELNET等,也可以自己定义应用层协议。WEB使用HTTP协议作为应用层协议,以封装HTTP文本信息,然后使用TCP作为传输层协议将它发到网络上。”

    TCP(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来,其中的过程非常复杂,我们这里只做简单、形象的介绍,你只要做到能够理解这个过程即可。我们来看看这三次对话的简单过程:主机A向主机B发出连接请求数据包:“我想给你发数据,可以吗?”,这是第一次对话;主机B向主机A发送同意连接和要求同步(同步就是两台主机一个在发送,一个在接收,协调工作)的数据包:“可以,你什么时候发?”,这是第二次对话;主机A再发出一个数据包确认主机B的要求同步:“我现在就发,你接着吧!”,这是第三次对话。三次“对话”的目的是使数据包的发送和接收同步,经过三次“对话”之后,主机A才向主机B正式发送数据。

    UDP(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去!UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。比如,我们经常使用“ping”命令来测试两台主机之间TCP/IP通信是否正常,其实“ping”命令的原理就是向对方主机发送UDP数据包,然后对方主机确认收到数据包,如果数据包是否到达的消息及时反馈回来,那么网络就是通的。例如,在默认状态下,一次“ping”操作发送4个数据包(如图2所示)。大家可以看到,发送的数据包数量是4包,收到的也是4包(因为对方主机收到后会发回一个确认收到的数据包)。这充分说明了UDP协议是面向非连接的协议,没有建立连接的过程。正因为UDP协议没有连接的过程,所以它的通信效果高;但也正因为如此,它的可靠性不如TCP协议高。QQ登陆采用TCP协议和HTTP协议,你和好友之间发送消息时主要采用UDP协议发消息,因此有时会出现收不到消息的情况。

     

    二、socket

    我们经常把socket翻译为套接字,socket是在应用层和传输层之间的一个抽象层,它把TCP/IP层复杂的操作抽象为几个简单的接口供应用层调用以实现进程在网络中通信。socket是一组接口,在设计模式中,socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在socket接口后面,对用户来说,一组简单的接口就是全部,让socket去组织数据,以符合指定的协议。

     

    三、webSocket

    1、简介

    WebSocket协议是基于TCP的一种新的网络协议,和http协议一样属于应用层协议,它实现了浏览器与服务器全双工(full-duplex)通信,也就是允许服务器主动发送信息给客户端。我在实现二维码扫描登录时曾使用过,有了它就不需要通过轮询或者建立长连接的方式来使客户端实时获取扫码状态,因为当扫码后,服务器端可以主动发送消息通知客户端。

    2、webSocket和http的区别

    http链接分为短链接和长链接,短链接是每次请求都要重新建立TCP链接,TCP又要三次握手才能建立,然后发送自己的信息。即每一个request对应一个response。长链接是在一定的期限内保持TCP连接不断开。客户端与服务器通信,必须要由客户端发起然后服务器返回结果。客户端是主动的,服务器是被动的。

    简单的说,WebSocket协议之前,双工通信是通过多个http链接轮询来实现的,这导致了效率低下。WebSocket解决了这个问题,他实现了多路复用,他是全双工通信。在webSocket协议下客服端和浏览器可以同时发送信息。建立了WebSocket之后服务器不必在浏览器发送request请求之后才能发送信息到浏览器。这时的服务器已有主动权想什么时候发就可以什么时候发送信息到客户端,而且信息当中不必再带有head的部分信息了。与http的长链接通信来比,这种方式不仅能降低服务器的压力,而且信息当中也减少了部分多余的信息。

    3、webSocket和socket的区别

    就像Java和JavaScript,并没有什么太大的关系,但又不能说完全没关系。可以这么说:

    • 命名方面,Socket是一个深入人心的概念,WebSocket借用了这一概念;
    • 使用方面,完全两个东西。

    总之,可以把WebSocket想象成HTTP,HTTP和Socket什么关系,WebSocket和Socket就是什么关系。

    最后附上一张有意思的图片:

     

    展开全文
  • WebSocket

    千次阅读 2015-08-03 17:25:24
    WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信。举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,...

    一、概述

    HTTP协议是一种无状态协议,服务器端本身不具有识别客户端的能力,必须借助外部机制,比如session和cookie,才能与特定客户端保持对话。

    WebSocket的主要作用是,允许服务器端与客户端进行全双工(full-duplex)的通信。举例来说,HTTP协议有点像发电子邮件,发出后必须等待对方回信;WebSocket则是像打电话,服务器端和客户端可以同时向对方发送数据,它们之间存着一条持续打开的数据通道。

    WebSocket协议完全可以取代Ajax方法,用来向服务器端发送文本和二进制数据,而且还没有“同域限制”。
    WebSocket不使用HTTP协议,而是使用自己的协议。WebSocket与http协议一样都是基于TCP的,属于应用层的协议,所以他们都是可靠的协议。WebSocket在建立握手连接时,数据是通过http协议传输的,但是在建立连接之后,真正的数据传输阶段是不需要http协议参与的。

    请求:
    GET / HTTP/1.1
    Connection: Upgrade		//表示浏览器通知服务器,如果可以,就升级到webSocket协议
    Upgrade: websocket 		//表示将通信协议从HTTP/1.1转向该项所指定的协议
    Host: example.com
    Origin: null			//验证浏览器域名是否在服务器许可的范围内
    Sec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==	//握手协议的密钥,是base64编码的16字节随机字符串
    Sec-WebSocket-Version: 13
    响应:
    HTTP/1.1 101 Switching Protocols
    Connection: Upgrade
    Upgrade: websocket
    Sec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=
    Sec-WebSocket-Origin: null
    Sec-WebSocket-Location: ws://example.com/	//表示进行通信的WebSocket网址
    注意:WebSocket协议用ws表示。此外,还有wss协议,表示加密的WebSocket协议,对应HTTPS协议。

    二、客户端

    1. 建立连接和断开连接、发送数据和接收数据、处理错误。
    2. WebSocket实例对象有一个readyState属性,表示目前的状态,可取4个值:
    【0:正在连接;1:连接成功;2:正在关闭;3:连接关闭】
    3. 客户端建立WebSocket流程:
    (0)检测浏览器是否支持WebSocket
    (1)握手协议成功以后,readyState就从0变为1,并触发open事件
    (2)关闭WebSocket连接,会触发close事件
    (3)客户端收到服务器发送的数据,会触发message事件
    (4)连接建立后,客户端通过send方法向服务器端发送数据
    if(window.WebSocket != undefined) {
    	var ws = new WebSocket("ws://localhost:10010");
    	ws.onopen = function(){
    		console.log("Opened!");
    		ws.send("I'm client,call server!!!");
    	};
    	ws.onclose = function(){
    		console.log("over!!!");
    	};
    	ws.onmessage = function(event){
    		console.log(event.data);
    	};
    	ws.onerror = function(error){
    		console.log("Error: "+ err);
    	}
    }

    三、服务器端

    使用ws(https://www.npmjs.com/package/ws)模块部署简单的服务器。
    var WebSocketServer = require('ws').Server;
    var wss = new WebSocketServer({port: 10010});
    wss.on('connection', function(conn) {
        //console.log(conn);
        conn.on('message', function(message) {
            console.log('received: %s', message);
            conn.send("I'm server,received your infomation!!!");
        });
    });
    [转载请标明出处:http://blog.csdn.net/ligang2585116]

    展开全文
  • webSocket

    2016-10-17 15:21:49
    WebSocket概述 WebSocket是基于H5规范的,WebSocket 类用于发送和接收数据。 在 H5 规范中,定义了客户端和服务器通讯的 WebSocket 方式,在得到浏览器支持以后,WebSocket 将会取代 Comet成为服务器推送的方法。...

    WebSocket概述

    WebSocket是基于H5规范的,WebSocket 类用于发送和接收数据。 在 H5 规范中,定义了客户端和服务器通讯的 WebSocket 方式,在得到浏览器支持以后,WebSocket 将会取代 Comet成为服务器推送的方法。 目前 Chrome、Firefox、Opera、Safari 等主流版本均支持,Internet Explorer从10开始支持。 WebSocket 标准在很大程度上简化了复杂的双向网络沟通和连接管理。

    下图显示了一个基于 WebSocket 的基本结构,在这种结构中,浏览器使用全双工的WebSocket连接,直接与远程主机通信:

    Egret 的 WebSocket 即为 H5 的 WebSocket 封装。

    用WebSocket进行通讯的基本过程

    确保项目支持WebSocket

    Egret 以官方扩展模块的形式支持 WebSocket。在现有的 Egret 项目中,修改 egretProperties.json 中的 modules 字段,在字段的最后添加 socket 模块:

    1. "name": "socket"

    在项目所在目录内执行一次引擎编译:

    1. egret build -e

    本步骤已经完成,现在项目中既可以使用WebSocket相关的API了。

    WebSocket对象

    所有的通讯都是基于一个WebSocket实例,首先创建WebSocket对象:

    1. var sock:egret.WebSocket = new egret.WebSocket();

    侦听事件

    WebSocket对象主要有两个事件,一个是连接服务器成功,另一个是收到服务器数据:

    1. sock.addEventListener( egret.ProgressEvent.SOCKET_DATA, onReceiveMessage, this );
    2. sock.addEventListener( egret.Event.CONNECT, onSocketOpen, this );

    连接服务器

    加入侦听事件后,即可连接服务器。注意像所有的通讯协议一样,服务器需要支持WebSocket协议,为便于测试,WebSocket官方提供了一个专用于测试的服务器echo.websocket.org,连接其80端口即可测试:

    1. sock.connect("echo.websocket.org", 80);

    发送消息

    连接成功后,即可发送消息,在前述的onSocketOpen处理函数中加入发送消息代码:

    1. var cmd = '{"cmd":"uzwan_login","gameId":"0","from":"guzwan","userId":"3565526"}';
    2. sock.writeUTF(cmd);

    消息的具体格式都是根据情况自己定义的,通常是json格式,便于解析。当然可以自定义其他的字符串格式。

    接收消息

    服务器根据约定的格式返回消息,则会触发SOCKET_DATA事件,在其事件处理函数onReceiveMessage中即可读取消息:

    1. var msg = sock.readUTF();

    读取到字符串后,即可根据约定的格式解析。

    使用示例

    将上一节所述的各部分用法连接起来:

    1. private webSocket:egret.WebSocket;
    2. private createGameScene():void {
    3. this.webSocket = new egret.WebSocket();
    4. this.webSocket.addEventListener(egret.ProgressEvent.SOCKET_DATA, this.onReceiveMessage, this);
    5. this.webSocket.addEventListener(egret.Event.CONNECT, this.onSocketOpen, this);
    6. this.webSocket.connect("echo.websocket.org", 80);
    7. }
    8. private onSocketOpen():void {
    9. var cmd = "Hello Egret WebSocket";
    10. console.log("连接成功,发送数据:" + cmd);
    11. this.webSocket.writeUTF(cmd);
    12. }
    13. private onReceiveMessage(e:egret.Event):void {
    14. var msg = this.webSocket.readUTF();
    15. console.log("收到数据:" + msg);
    16. }
    展开全文
  • SpringBoot2.0集成WebSocket,实现后台向前端推送信息

    万次阅读 多人点赞 2018-05-10 22:54:29
    什么是WebSocket? - 初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处? - 答案很简单,因为 HTTP 协议有一个缺陷:***通信只能由客户端发起***,...

    什么是WebSocket?

    这里写图片描述
    WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

    为什么需要 WebSocket?

    初次接触 WebSocket 的人,都会问同样的问题:我们已经有了 HTTP 协议,为什么还需要另一个协议?它能带来什么好处?

    • 答案很简单,因为 HTTP 协议有一个缺陷:通信只能由客户端发起,HTTP 协议做不到服务器主动向客户端推送信息。
      这里写图片描述
      举例来说,我们想要查询当前的排队情况,只能是页面轮询向服务器发出请求,服务器返回查询结果。轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。因此WebSocket 就是这样发明的。

    前言

    2020-10-20 教程补充:

    • 补充关于@Component@ServerEndpoint关于是否单例模式等的解答,感谢大家热心提问和研究。
    • Vue版本的websocket连接方法

    2020-01-05 教程补充:

    感谢大家的支持和留言,14W访问量是满满的动力!接下来还会有websocket+redis集群优化篇针对多ws服务器做简单优化处理,敬请期待!

    话不多说,马上进入干货时刻。

    maven依赖

    SpringBoot2.0对WebSocket的支持简直太棒了,直接就有包可以引入

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

    WebSocketConfig

    启用WebSocket的支持也是很简单,几句代码搞定

    import org.springframework.context.annotation.Bean;
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.server.standard.ServerEndpointExporter;
    
    /**
     * 开启WebSocket支持
     * @author zhengkai.blog.csdn.net
     */
    @Configuration  
    public class WebSocketConfig {  
    	
        @Bean  
        public ServerEndpointExporter serverEndpointExporter() {  
            return new ServerEndpointExporter();  
        }  
      
    } 
    

    WebSocketServer

    这就是重点了,核心都在这里。

    1. 因为WebSocket是类似客户端服务端的形式(采用ws协议),那么这里的WebSocketServer其实就相当于一个ws协议的Controller

    2. 直接@ServerEndpoint("/imserver/{userId}")@Component启用即可,然后在里面实现@OnOpen开启连接,@onClose关闭连接,@onMessage接收消息等方法。

    3. 新建一个ConcurrentHashMap webSocketMap 用于接收当前userId的WebSocket,方便IM之间对userId进行推送消息。单机版实现到这里就可以。

    4. 集群版(多个ws节点)还需要借助mysql或者redis等进行处理,改造对应的sendMessage方法即可。

    package com.softdev.system.demo.config;
    
    import java.io.IOException;
    import java.util.concurrent.ConcurrentHashMap;
    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 com.alibaba.fastjson.JSON;
    import com.alibaba.fastjson.JSONObject;
    import org.apache.commons.lang.StringUtils;
    import org.springframework.stereotype.Component;
    import cn.hutool.log.Log;
    import cn.hutool.log.LogFactory;
    
    
    /**
     * @author zhengkai.blog.csdn.net
     */
    @ServerEndpoint("/imserver/{userId}")
    @Component
    public class WebSocketServer {
    
        static Log log=LogFactory.get(WebSocketServer.class);
        /**静态变量,用来记录当前在线连接数。应该把它设计成线程安全的。*/
        private static int onlineCount = 0;
        /**concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。*/
        private static ConcurrentHashMap<String,WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
        /**与某个客户端的连接会话,需要通过它来给客户端发送数据*/
        private Session session;
        /**接收userId*/
        private String userId="";
    
        /**
         * 连接建立成功调用的方法*/
        @OnOpen
        public void onOpen(Session session,@PathParam("userId") String userId) {
            this.session = session;
            this.userId=userId;
            if(webSocketMap.containsKey(userId)){
                webSocketMap.remove(userId);
                webSocketMap.put(userId,this);
                //加入set中
            }else{
                webSocketMap.put(userId,this);
                //加入set中
                addOnlineCount();
                //在线数加1
            }
    
            log.info("用户连接:"+userId+",当前在线人数为:" + getOnlineCount());
    
            try {
                sendMessage("连接成功");
            } catch (IOException e) {
                log.error("用户:"+userId+",网络异常!!!!!!");
            }
        }
    
        /**
         * 连接关闭调用的方法
         */
        @OnClose
        public void onClose() {
            if(webSocketMap.containsKey(userId)){
                webSocketMap.remove(userId);
                //从set中删除
                subOnlineCount();
            }
            log.info("用户退出:"+userId+",当前在线人数为:" + getOnlineCount());
        }
    
        /**
         * 收到客户端消息后调用的方法
         *
         * @param message 客户端发送过来的消息*/
        @OnMessage
        public void onMessage(String message, Session session) {
            log.info("用户消息:"+userId+",报文:"+message);
            //可以群发消息
            //消息保存到数据库、redis
            if(StringUtils.isNotBlank(message)){
                try {
                    //解析发送的报文
                    JSONObject jsonObject = JSON.parseObject(message);
                    //追加发送人(防止串改)
                    jsonObject.put("fromUserId",this.userId);
                    String toUserId=jsonObject.getString("toUserId");
                    //传送给对应toUserId用户的websocket
                    if(StringUtils.isNotBlank(toUserId)&&webSocketMap.containsKey(toUserId)){
                        webSocketMap.get(toUserId).sendMessage(jsonObject.toJSONString());
                    }else{
                        log.error("请求的userId:"+toUserId+"不在该服务器上");
                        //否则不在这个服务器上,发送到mysql或者redis
                    }
                }catch (Exception e){
                    e.printStackTrace();
                }
            }
        }
    
        /**
         *
         * @param session
         * @param error
         */
        @OnError
        public void onError(Session session, Throwable error) {
            log.error("用户错误:"+this.userId+",原因:"+error.getMessage());
            error.printStackTrace();
        }
        /**
         * 实现服务器主动推送
         */
        public void sendMessage(String message) throws IOException {
            this.session.getBasicRemote().sendText(message);
        }
    
    
        /**
         * 发送自定义消息
         * */
        public static void sendInfo(String message,@PathParam("userId") String userId) throws IOException {
            log.info("发送消息到:"+userId+",报文:"+message);
            if(StringUtils.isNotBlank(userId)&&webSocketMap.containsKey(userId)){
                webSocketMap.get(userId).sendMessage(message);
            }else{
                log.error("用户"+userId+",不在线!");
            }
        }
    
        public static synchronized int getOnlineCount() {
            return onlineCount;
        }
    
        public static synchronized void addOnlineCount() {
            WebSocketServer.onlineCount++;
        }
    
        public static synchronized void subOnlineCount() {
            WebSocketServer.onlineCount--;
        }
    }
    

    消息推送

    至于推送新信息,可以再自己的Controller写个方法调用WebSocketServer.sendInfo();即可

    
    import com.softdev.system.demo.config.WebSocketServer;
    import org.springframework.http.ResponseEntity;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    import org.springframework.web.servlet.ModelAndView;
    import java.io.IOException;
    
    /**
     * WebSocketController
     * @author zhengkai.blog.csdn.net
     */
    @RestController
    public class DemoController {
    
        @GetMapping("index")
        public ResponseEntity<String> index(){
            return ResponseEntity.ok("请求成功");
        }
    
        @GetMapping("page")
        public ModelAndView page(){
            return new ModelAndView("websocket");
        }
    
        @RequestMapping("/push/{toUserId}")
        public ResponseEntity<String> pushToWeb(String message, @PathVariable String toUserId) throws IOException {
            WebSocketServer.sendInfo(message,toUserId);
            return ResponseEntity.ok("MSG SEND SUCCESS");
        }
    }
    
    

    页面发起

    页面用js代码调用websocket,当然,太古老的浏览器是不行的,一般新的浏览器或者谷歌浏览器是没问题的。还有一点,记得协议是ws的,如果使用了一些路径类,可以replace(“http”,“ws”)来替换协议。

    <!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;
        function openSocket() {
            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://localhost:9999/demo/imserver/"+$("#userId").val();
                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(msg) {
                    console.log(msg.data);
                    //发现消息进入    开始处理前端触发逻辑
                };
                //关闭事件
                socket.onclose = function() {
                    console.log("websocket已关闭");
                };
                //发生了错误事件
                socket.onerror = function() {
                    console.log("websocket发生了错误");
                }
            }
        }
        function sendMessage() {
            if(typeof(WebSocket) == "undefined") {
                console.log("您的浏览器不支持WebSocket");
            }else {
                console.log("您的浏览器支持WebSocket");
                console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
                socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            }
        }
    </script>
    <body>
    <p>【userId】:<div><input id="userId" name="userId" type="text" value="10"></div>
    <p>【toUserId】:<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
    <p>【toUserId】:<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
    <p>【操作】:<div><a onclick="openSocket()">开启socket</a></div>
    <p>【操作】:<div><a onclick="sendMessage()">发送消息</a></div>
    </body>
    
    </html>
    

    运行效果

    • v20200105,加入开源项目spring-cloud-study-websocket,更新运行效果,更方便理解。
    • v1.1的效果,刚刚修复了日志,并且支持指定监听某个端口,代码已经全部更新,现在是这样的效果
    1. 打开两个页面,按F12调出控控制台查看测试效果:
    页面 参数
    http://localhost:9999/demo/page fromUserId=10,toUserId=20
    http://localhost:9999/demo/page fromUserId=20,toUserId=10

    分别开启socket,再发送消息
    在这里插入图片描述
    在这里插入图片描述
    2. 向前端推送数据:

    • http://localhost:9999/demo/push/10?message=123123

    在这里插入图片描述
    通过调用push api,可以向指定的userId推送信息,当然报文这里乱写,建议规定好格式。

    后续

    针对简单IM的业务场景,进行了一些优化,可以看后续的文章SpringBoot2+WebSocket之聊天应用实战(优化版本)(v20201005已整合)

    主要变动是CopyOnWriteArraySet改为ConcurrentHashMap,保证多线程安全同时方便利用map.get(userId)进行推送到指定端口。

    相比之前的Set,Set遍历是费事且麻烦的事情,而Map的get是简单便捷的,当WebSocket数量大的时候,这个小小的消耗就会聚少成多,影响体验,所以需要优化。在IM的场景下,指定userId进行推送消息更加方便。

    Websocker注入Bean问题

    关于这个问题,可以看最新发表的这篇文章,在参考和研究了网上一些攻略后,项目已经通过该方法注入成功,大家可以参考。
    关于controller调用controller/service调用service/util调用service/websocket中autowired的解决方法

    netty-websocket-spring-boot-starter

    Springboot2构建基于Netty的高性能Websocket服务器(netty-websocket-spring-boot-starter)
    只需要换个starter即可实现高性能websocket,赶紧使用吧

    Springboot2+Netty+Websocket

    Springboot2+Netty实现Websocket,使用官方的netty-all的包,比原生的websocket更加稳定更加高性能,同等配置情况下可以handle更多的连接。

    代码样式全部已经更正,也支持websocket连接url带参数功能,另外也感谢大家的阅读和评论,一起进步,谢谢!~~

    ServerEndpointExporter错误

    org.springframework.beans.factory.BeanCreationException: Error creating bean with name ‘serverEndpointExporter’ defined in class path resource [com/xxx/WebSocketConfig.class]: Invocation of init method failed; nested exception is java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available

    感谢@来了老弟儿 的反馈:

    如果tomcat部署一直报这个错,请移除 WebSocketConfig@Bean ServerEndpointExporter 的注入 。

    ServerEndpointExporter 是由Spring官方提供的标准实现,用于扫描ServerEndpointConfig配置类和@ServerEndpoint注解实例。使用规则也很简单:

    1. 如果使用默认的嵌入式容器 比如Tomcat 则必须手工在上下文提供ServerEndpointExporter
    2. 如果使用外部容器部署war包,则不需要提供提供ServerEndpointExporter,因为此时SpringBoot默认将扫描服务端的行为交给外部容器处理,所以线上部署的时候要把WebSocketConfig中这段注入bean的代码注掉。

    正式项目的前端WebSocket框架 GoEasy

    感谢kkatrina的补充,正式的项目中,一般是用第三方websocket框架来做,稳定性、实时性有保证的多,也会包括一些心跳、重连机制。

    GoEasy专注于服务器与浏览器,浏览器与浏览器之间消息推送,完美兼容世界上的绝大多数浏览器,包括IE6, IE7之类的非常古老的浏览器。支持Uniapp,各种小程序,react,vue等所有主流Web前端技术。
    GoEasy采用 发布/订阅 的消息模式,帮助您非常轻松的实现一对一,一对多的通信。
    https://www.goeasy.io/cn/doc/

    @Component@ServerEndpoint关于是否单例模式,能否使用static Map等一些问题的解答

    看到大家都在热心的讨论关于是否单例模式这个问题,请大家相信自己的直接,如果websocket是单例模式,还怎么服务这么多session呢。

    1. websocket是原型模式@ServerEndpoint每次建立双向通信的时候都会创建一个实例,区别于spring的单例模式。
    2. Spring的@Component默认是单例模式,请注意,默认 而已,是可以被改变的。
    3. 这里的@Component仅仅为了支持@Autowired依赖注入使用,如果不加则不能注入任何东西,为了方便。
    4. 什么是prototype 原型模式? 基本就是你需要从A的实例得到一份与A内容相同,但是又互不干扰的实例B的话,就需要使用原型模式。
    5. 关于在原型模式下使用static 的webSocketMap,请注意这是ConcurrentHashMap ,也就是线程安全/线程同步的,而且已经是静态变量作为全局调用,这种情况下是ok的,或者大家如果有顾虑或者更好的想法的化,可以进行改进。 例如使用一个中间类来接收和存放session。
    6. 为什么每次都@OnOpen都要检查webSocketMap.containsKey(userId) ,首先了为了代码强壮性考虑,假设代码以及机制没有问题,那么肯定这个逻辑是废的对吧。但是实际使用的时候发现偶尔会出现重连失败或者其他原因导致之前的session还存在,这里就做了一个清除旧session,迎接新session的功能。

    Vue版本的websocket连接

    感谢**@GzrStudy**的贡献,供大家参考。

    <script>
    export default {
        data() {
            return {
                socket:null,
                userId:localStorage.getItem("ms_uuid"),
                toUserId:'2',
                content:'3'
            }
        },
      methods: {
        openSocket() {
          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://localhost:8081/imserver/" + this.userId;
            socketUrl = socketUrl.replace("https", "ws").replace("http", "ws");
            console.log(socketUrl);
            if (this.socket != null) {
              this.socket.close();
              this.socket = null;
            }
            this.socket = new WebSocket(socketUrl);
            //打开事件
            this.socket = new WebSocket(socketUrl);
            //打开事件
            this.socket.onopen = function() {
              console.log("websocket已打开");
              //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            this.socket.onmessage = function(msg) {
              console.log(msg.data);
              //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            this.socket.onclose = function() {
              console.log("websocket已关闭");
            };
            //发生了错误事件
            this.socket.onerror = function() {
              console.log("websocket发生了错误");
            };
          }
        },
        sendMessage() {
          if (typeof WebSocket == "undefined") {
            console.log("您的浏览器不支持WebSocket");
          } else {
            console.log("您的浏览器支持WebSocket");
            console.log(
              '{"toUserId":"' +
                 this.toUserId +
                '","contentText":"' +
                 this.content +
                '"}'
            );
            this.socket.send(
              '{"toUserId":"' +
                 this.toUserId +
                '","contentText":"' +
                 this.content +
                '"}'
             );
        
        }
    }
    
    展开全文
  • websocket

    千次阅读 2013-12-04 11:02:51
    http://www.iis.net/learn/get-started/whats-new-in-iis-8/iis-80-websocket-protocol-support ...WebSocket API 在本文中 实现 WebSocket WebSocket 编程 API 参考 IEBlog 文章 规范 相关主题 Internet Explo
  • 看完让你彻底搞懂Websocket原理

    万次阅读 多人点赞 2016-03-11 15:46:38
    偶然在知乎上看到一篇回帖,瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里,分享一下。比较喜欢看这种博客,读起来很轻松,不枯燥,没有布道师的阵仗,纯粹为分享...
  • WS 客户端1 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...titl
  • JAVA+WebSocket聊天室(WebSocket示例)

    千次下载 热门讨论 2012-11-18 16:27:39
    3 lib下的catalina.jar 和 tomcat-coyote.jar取自TOMCAT7.0.32,所以如果部署在TOMCAT7.0.32上就重复了,那么删除WebSocketDemo1/WebRoot/WEB-INF/lib/*.jar 如果部署在其它版本的TOMCAT可以保留(未试过)。
  • 微信小程序WebSocket实现聊天对话功能完整源码

    万次阅读 多人点赞 2018-06-26 10:20:57
    微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 正文: js var app = getApp(); ...var frameBuffer_Data, session, SocketTask;...var upload_url ='请填写您的图片上...
  • 基于Tomcat7、Java、Ext、WebSocket的聊天室

    千次下载 热门讨论 2013-08-01 21:41:11
    项目可以直接导入,一个基于Tomcat7、Java、Ext、WebSocket的聊天室,分数是3分,目的不是为了赚分,是为了大家能够评论,提出意见。
  • SpringBoot2+Netty+WebSocket(netty实现websocket,支持URL参数)

    万次阅读 多人点赞 2019-06-12 16:20:11
    关于Netty Netty 是一个利用 Java 的高级网络的能力,隐藏其背后的复杂性而提供一个易于使用的 API 的客户端/服务器框架。 MAVEN依赖 <dependencies> <!-- ...g...
  • WebSocket客户端和服务端实例源码

    千次下载 热门讨论 2015-08-14 13:30:01
    WebSocket客户端和服务端实例源码 WebSocket ws实例 HTML5 用java实现的服务端 Websocket与服务器的正常通信 众所周知,Web 应用的交互过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回...
  • 在Spring Boot框架下使用WebSocket实现消息推送

    万次阅读 多人点赞 2016-12-23 16:48:37
    Spring Boot的学习持续进行中。前面两篇博客我们介绍了如何使用Spring Boot容器搭建Web项目(使用Spring Boot开发Web项目)以及怎样为我们的Project添加HTTPS的支持(使用Spring Boot开发Web项目(二)之...什么是WebSocket
  • java实现websocket client

    千次下载 热门讨论 2013-11-08 17:47:12
    java_websocket.jar最新jar包 可用java实现websocket客户端,使用demo: https://github.com/TooTallNate/Java-WebSocket/blob/master/src/main/example/ExampleClient.java
  • 最近在做的两个系统中都用到了webSocket,一个是实时转译系统,该系统就是通过收集端收音,然后实时将录音转换成文字显示到页面上,第二个是智能客服系统。由于之前用webSocket比较少,一直以为在创建连接的时候,不...
  • 我在做spring mvc+websocket时遇到session为null的问题。 ![图片说明](https://img-ask.csdn.net/upload/201605/09/1462784616_157633.jpg) 我在登录的controller里记录了session ![图片说明]...
  • System.out.println("*** WebSocket Received from sessionId " + this.session.getId() + ": " + message); } @OnClose public void end() { System.out.println("*** WebSocket closed from ...
  • WebSocket connection to 'ws://localhost:9018/testSocket/websocket' failed: Error during WebSocket handshake: Unexpected response code: 400 这是为啥? 都配置了 ,为啥 是404 奇怪~~~ 那个大神给我解决...
  • springboot+websocket实现服务端、客户端

    万次阅读 多人点赞 2019-01-12 12:54:43
    一、引言 小编最近一直在使用springboot框架...websocket主要功能就是实现网络通讯,比如说最经典的客服聊天窗口、您有新的消息通知,或者是项目与项目之间的通讯,都可以采用websocket来实现。 二、websocket介...
  • 我在做一个Android项目中用到了websocket,使用了autobahn-android.jar包,但是在建立连接之后报了错误。 ``` D/de.tavendo.autobahn.WebSocketReader: run() : WebSocketException (de.tavendo.autobahn....
  • .net websocket 实现 报错

    2015-05-14 07:57:23
    Error during WebSocket handshake: Unexpected response code: 200 chrome控制台报的错误 action代码 ``` public HttpResponseMessage T() { if (System.Web.HttpContext.Current.IsWebSocketRequest) { ...
  • websocket 爬虫

    千次阅读 2018-08-08 13:05:28
    有些网站为了追求数据的实时更新,很多时候会采用 websocket 的方式,例如股票交易数据、数据货币交易平台等。关于websocket的机制,网上不乏相关资料。但关于websocket的爬虫文章,还是比较少的。所以特地写此文章...
  • websocket使用

    万次阅读 热门讨论 2016-04-05 21:10:08
    websocket,html5中新一代全双工通信协议。其底层仍然是http协议。 ... WebSocket 请求响应客户端服务器交互图 WebSocket 客户端支持 浏览器 支持情况 Chrome Chrome version 4+支持 Firefox
  • websocket最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。 浏览器和服务器只需要要做一个握手的动作,在建立连接之后,服务器可以主动传送数据给客户端,客户端也可以随时向服务器...

空空如也

1 2 3 4 5 ... 20
收藏数 45,740
精华内容 18,296
热门标签
关键字:

websocket