精华内容
下载资源
问答
  • 简介 WebSocket 是 HTML5 开始提供的一种在单个 TCP ... HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯 WebSocket 属性 Socket.readyState 只读属性readyState..

    简介

    • WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议
    • WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据
    • 浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输
    • HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯

    WebSocket 属性

    Socket.readyState

    只读属性 readyState 表示连接状态,可以是以下值:

    • 0 - 表示连接尚未建立。

    • 1 - 表示连接已建立,可以进行通信。

    • 2 - 表示连接正在进行关闭。

    • 3 - 表示连接已经关闭或者连接不能打开。

    Socket.bufferedAmount

    只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输,但是还没有发出的 UTF-8 文本字节数。

    WebSocket 事件

    open Socket.onopen 连接建立时触发
    message Socket.onmessage 客户端接收服务端数据时触发
    error Socket.onerror 通信发生错误时触发
    close Socket.onclose 连接关闭时触发

    WebSocket 方法 

    Socket.send()

    使用连接发送数据

    Socket.close()

    关闭连接

    实例demo

    Netty使用WebSocket协议实现服务器

    /**
     * ws服务器
     *
     * @author LionLi
     */
    public class WebSocketServer {
    
        public static void main(String[] args) throws Exception {
            // 创建 boss 和 worker 工作组
            EventLoopGroup bossGroup = new NioEventLoopGroup(1);
            EventLoopGroup workerGroup = new NioEventLoopGroup();
            try {
                ServerBootstrap serverBootstrap = new ServerBootstrap();
                serverBootstrap.group(bossGroup, workerGroup);
                // 主线程处理
                serverBootstrap.channel(NioServerSocketChannel.class);
                // 子线程业务处理
                serverBootstrap.childHandler(new ChannelInitializer<SocketChannel>() {
                    @Override
                    protected void initChannel(SocketChannel ch) {
                        ChannelPipeline pipeline = ch.pipeline();
                        //因为基于http协议,使用http的编码和解码器
                        pipeline.addLast(new HttpServerCodec());
                        //是以块方式写,添加ChunkedWriteHandler处理器
                        pipeline.addLast(new ChunkedWriteHandler());
                        // http数据聚合器 用于将大数据量分段传输的数据 聚合
                        pipeline.addLast(new HttpObjectAggregator(8192));
                        // websocket协议处理器
                        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
                        // 自定义的业务处理
                        pipeline.addLast(new WebSocketHandler());
                    }
                });
                // 启动服务器
                ChannelFuture channelFuture = serverBootstrap.bind(8088).sync();
                channelFuture.channel().closeFuture().sync();
            } finally {
                bossGroup.shutdownGracefully();
                workerGroup.shutdownGracefully();
            }
        }
    }

    自定义业务处理

    /**
     * 业务处理器
     *
     * @author LionLi
     */
    // TextWebSocketFrame 文本处理
    public class WebSocketHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    
        /**
         * 通道消息读取
         */
        @Override
        protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) {
            System.out.println("收到消息 " + msg.text());
            ctx.channel().writeAndFlush(new TextWebSocketFrame("收到消息 " + msg.text()));
        }
    
        /**
         * 连接初始化
         */
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) {
            System.out.println("客户端连接:通道唯一id为 => " + ctx.channel().id().asLongText());
            System.out.println("客户端连接:通道不唯一id为 => " + ctx.channel().id().asShortText());
        }
    
        /**
         * 退出连接
         */
        @Override
        public void handlerRemoved(ChannelHandlerContext ctx) {
            System.out.println("客户端断开" + ctx.channel().id().asLongText());
        }
    
        /**
         * 异常处理
         */
        @Override
        public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) {
            System.out.println("客户端异常 " + cause.getMessage());
            //关闭连接
            ctx.close();
        }
    }

    测试

    使用页面进行测试

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Netty实现WebSocket服务器</title>
    </head>
    <body>
    <script>
        var socket;
        // 判断当前浏览器是否支持websocket
        if (window.WebSocket) {
            // 创建连接
            socket = new WebSocket("ws://localhost:8088/ws");
            // 消息监听
            socket.onmessage = function (ev) {
                var rt = document.getElementById("responseText");
                rt.value = rt.value + "\n" + ev.data;
            }
    
            // 连接初始化
            socket.onopen = function (ev) {
                var rt = document.getElementById("responseText");
                rt.value = "连接开启了.."
            }
    
            // 连接关闭
            socket.onclose = function (ev) {
                var rt = document.getElementById("responseText");
                rt.value = rt.value + "\n" + "连接关闭了.."
            }
        } else {
            alert("当前浏览器不支持websocket")
        }
    
        // 发送消息
        function send(message) {
            if (!window.socket) {
                return;
            }
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(message)
            } else {
                alert("连接没有开启");
            }
        }
    </script>
    <form onsubmit="return false">
        <label>
            <textarea name="message" style="height: 300px; width: 300px"></textarea>
        </label>
        <input type="button" value="发送消息" onclick="send(this.form.message.value)">
        <label for="responseText"></label>
        <textarea id="responseText" style="height: 300px; width: 300px"></textarea>
        <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    </form>
    </body>
    </html>

    启动服务器

    打开页面 自动连接服务器

    发送消息

    关闭页面

     

    项目已上传到gitee

    地址: netty-demo

    如果帮到您了,请帮忙点个star

    展开全文
  • WebSocket

    2017-05-24 21:30:03
    它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是: WebSocket 是一种双向通信协议,在建立连接后...

    原文
    WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:

    1. WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据,就像 Socket 一样
    2. WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接,连接成功后才能相互通信。

      WebSocket 服务端 API 示例

    //将 WebSocket 服务端运行在 ws://[Server 端 IP 或域名]:[Server 端口]/websockets/echo 的访问端点
    @ServerEndpoint("/echo")
    public class EchoEndpoint {
    
     //在这个端点一个新的连接建立时被调用
    @OnOpen
    public void onOpen(Session session) throws IOException {
    //以下代码省略...
    }
    
    @OnMessage
    public String onMessage(String message) {
    //以下代码省略...
    }
    
    @Message(maxMessageSize=6)
    public void receiveMessage(String s) {
    //以下代码省略...
    } 
    
    @OnError
    public void onError(Throwable t) {
    //以下代码省略...
    }
     //在连接被终止时调用。
    @OnClose
    public void onClose(Session session, CloseReason reason) {
    //以下代码省略...
    } 
    
    }

    WebSocket 客户端 API

    //申请一个 WebSocket 对象,参数是需要连接的服务器端的地址,同 HTTP 协议开头一样,WebSocket 协议的 URL 使用 ws://开头,另外安全的 WebSocket 协议使用 wss://开头
    var ws = new WebSocket(“ws://echo.websocket.org”); 
    //当 Browser 和 WebSocketServer 连接成功后,会触发 onopen 消息;
     ws.onopen = function(){ws.send(“Test!”); }; 
     //当 Browser 接收到 WebSocketServer 发送过来的数据时,就会触发 onmessage 消息,参数 evt 中包含 Server 传输过来的数据
     ws.onmessage = function(evt){console.log(evt.data);ws.close();}; 
     //当 Browser 接收到 WebSocketServer 端发送的关闭连接请求时,就会触发 onclose 消息。我们可以看出所有的操作都是采用异步回调的方式触发,这样不会阻塞 UI,可以获得更快的响应时间,更好的用户体验
     ws.onclose = function(evt){console.log(“WebSocketClosed!”);}; 
     //如果连接失败,发送、接收数据失败或者处理数据出现错误,browser 会触发 onerror 消息
     ws.onerror = function(evt){console.log(“WebSocketError!”);};

    例子

     var websocket=window.WebSocket || window.MozWebSocket;
        var isConnected = false;
        initWebSocket("ws://121.40.165.18:8088");
        function doOpen(){
            isConnected = true;
    
    
        }
    
        function doClose(){
            alert(("已经断开连接");
            isConnected = false;
        }
    
        function doError() {
            alert(("连接异常");
            isConnected = false;
    
        }
    
        function doMessage(message){
            var event =message;
            doReciveEvent(event);
        }
    
        function doSend(message) {
            if (websocket != null) {
                websocket.send(JSON.stringify(message));
            } else {
                alert(("您已经掉线,无法与服务器通信!");
            }
        }
    
        //初始话 WebSocket
        function initWebSocket(wcUrl) {
            if (window.WebSocket) {
                websocket = new WebSocket(encodeURI(wcUrl));
                websocket.onopen = doOpen;
                websocket.onerror = doError;
                websocket.onclose = doClose;
                websocket.onmessage = doMessage;
            }
            else{
                alert(("您的设备不支持 webSocket!");
    
            }
        };
    
        function doReciveEvent(event){
    //设备不存在,客户端断开连接
            if(event.eventType==101){
                alert(("设备不存在或设备号密码错");
                websocket.close();
            }
    //返回组设备及计算目标位置信息,更新地图
            else if(event.eventType==104||event.eventType==103){
    
    
                alert(("infoField","有新报修设备或设备离线, 地图已更新!", "infoDialog");
            }
    
        }

    doOpen 回调函数处理打开 WebSocket,A 类设备或者 B 类设备连接上 WebSocket 服务端后,将初始化地图并显示默认位置,然后向服务端发送设备登入的消息。
    doReciveEvent 函数处理关闭 WebSocket,A 类/B 类设备离线(退出移动终端上的应用)时,服务端关闭 HTTP 长连接,客户端 WebSocket 对象执行 onclose 回调句柄。
    initWebSocket 初始化 WebSocket,连接 WebSocket 服务端,并设置处理回调句柄,如果浏览器版本过低而不支持 HTML5,提示客户设备不支持 WebSocket。
    doSend 函数处理客户端向服务端发送消息,注意 message 是 JSON OBJ 对象,通过 JSON 标准 API 格式化字符串。
    doMessage 函数处理 WebSocket 服务端返回的消息,后台返回的 message 为 JSON 字符串,通过 jQuery 的 parseJSON API 格式化为 JSON Object 以便客户端处理 doReciveEvent 函数时客户端收到服务端返回消息的具体处理,由于涉及大量业务逻辑在此不再赘述。

    另外node.js 同样可以创建websocket服务器 就是 /socket.io

    展开全文
  • websocket

    2016-04-27 11:41:35
    它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:  WebSocket 是一种双向通信协议,在建立连接...
            WebSocket 是 HTML5 一种新的协议。它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:
           WebSocket 是一种双向通信协议,在建立连接后,WebSocket 服务器和 Browser/Client Agent 都能主动的向对方发送或接收数据,就像 Socket 一样;

           WebSocket 需要类似 TCP 的客户端和服务器端通过握手连接,连接成功后才能相互通信。

            解决痛点:

    •     众所周知,Web 应用的交互过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现,这种机制对于信息变化不是特别频繁的应用尚可,但对于实时要求高、海量并发的应用来说显得捉襟见肘,尤其在当前业界移动互联网蓬勃发展的趋势下,高并发与用户实时响应是 Web 应用经常面临的问题,比如金融证券的实时信息,Web 导航应用中的地理位置获取,社交网络的实时消息推送等。



          原理:   

         Demo:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Testing websockets</title>
    </head>
    <body>
    	<div>
    		<input type="submit" value="Start" οnclick="start()" />
    	</div>
    	<div id="messages"></div>
    	<script type="text/javascript">
    		var webSocket = 
    			new WebSocket('ws://localhost:8080/com-byteslounge-websockets/websocket');
    
    		webSocket.onerror = function(event) {
    			onError(event)
    		};
    
    		webSocket.onopen = function(event) {
    			onOpen(event)
    		};
    
    		webSocket.onmessage = function(event) {
    			onMessage(event)
    		};
    
    		function onMessage(event) {
    			document.getElementById('messages').innerHTML 
    				+= '<br />' + event.data;
    		}
    
    		function onOpen(event) {
    			document.getElementById('messages').innerHTML 
    				= 'Connection established';
    		}
    
    		function onError(event) {
    			alert(event.data);
    		}
    
    		function start() {
    			webSocket.send('hello');
    			return false;
    		}
    	</script>
    </body>
    </html>

    package com.byteslounge.websockets;
    
    import java.io.IOException;
    
    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.ServerEndpoint;
    
    @ServerEndpoint("/websocket")
    public class WebSocketTest {
    
    	@OnMessage
        public void onMessage(String message, Session session) 
        	throws IOException, InterruptedException {
    		
    		// Print the client message for testing purposes
    		System.out.println("Received: " + message);
    		
    		// Send the first message to the client
    		session.getBasicRemote().sendText("This is the first server message");
    		
    		// Send 3 messages to the client every 5 seconds
    		int sentMessages = 0;
    		while(sentMessages < 3){
    			Thread.sleep(5000);
    			session.getBasicRemote().
    				sendText("This is an intermediate server message. Count: " 
    					+ sentMessages);
    			sentMessages++;
    		}
    		
    		// Send a final message to the client
    		session.getBasicRemote().sendText("This is the last server message");
        }
    	
    	@OnOpen
        public void onOpen () {
            System.out.println("Client connected");
        }
    
        @OnClose
        public void onClose () {
        	System.out.println("Connection closed");
        }
    }
    




    展开全文
  • Websocket

    2020-09-17 22:48:29
    提示:文章写完后,目录可以自动生成,如何生成可...它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的。它与HTTP一样通过已建立的TCP连接来传输数据,但是它和HTTP最大不同是:We

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档


    提示:以下是本篇文章正文内容,下面案例可供参考

    一、什么是Websocket

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

    二、WebSocket特点

    真正的双向通讯,建立连接后客户端与服务器端是完全平等的,可以互相主动请求。而HTTP长连接基于HTTP,是传统的客户端对服务器发起请求的模式。HTTP长连接中,每次数据交换除了真正的数据部分外,服务器和客户端还要大量交换HTTP header,信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后,之后交换的数据都不需要发送 HTTP header就能交换数据,这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现(主流浏览器都已支持HTML5)。此外还有 multiplexing、不同的URL可以复用同一个WebSocket连接等功能。这些都是HTTP长连接不能做到的。

    二、WebSocket服务端与客户端通讯过程

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

    Accept-Encoding: gzip, deflate
    Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
    Cache-Control: no-cache
    Connection: Upgrade
    Host: 192.168.1.100:8080
    Origin: http://127.0.0.1:8848
    Pragma: no-cache
    Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
    Sec-WebSocket-Key: K13mxl1X9usRZ7wd1ddPsw==
    Sec-WebSocket-Version: 13
    Upgrade: websocket
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36
    

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

    服务端收到报文后返回的数据格式==>

    示例):

    HTTP/1.1 101 Switching Protocols
    Connection: upgrade
    Date: Fri, 18 Sep 2020 00:35:41 GMT
    Sec-WebSocket-Accept: 93CFX2bxea28Gtn10qXXnff6wVk=
    Sec-WebSocket-Extensions: permessage-deflate;client_max_window_bits=15
    Upgrade: websocket
    

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

    展开全文
  • 这种简单粗暴模式有一个明显的缺点,就是浏览器需要不断的向服务器发出请求,HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源(对于很多局域网内的企业应用,...
  • WebSocket概念出来之前,如果页面要不停地显示最新的价格,那么必须不停地刷新页面,或者用一段js代码每隔几秒钟发消息询问服务器数据。 而使用WebSocket技术之后,当服务器有了新的数据,会主动通知浏览器。 ...
  • webSocket通信

    千次阅读 2017-01-08 17:58:04
    它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是:WebSocket 是一种双向通信协议,在建立连接后,...
  • WebSocket讲解

    2020-06-13 15:53:37
    它实现了浏览器与服务器全双⼯通信,能更好的节省服 务器资源和带宽并达到实时通讯它建⽴在TCP之上,同HTTP⼀样通过TCP来传输数据。WebSocket同HTTP⼀样也是应⽤层的协议,并且⼀开始的握⼿也需要借助HTTP请求完成。...
  • websocket简介

    2016-07-28 11:45:00
    它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯,它建立在 TCP 之上,同 HTTP 一样通过 TCP 来传输数据,但是它和 HTTP 最大不同是: WebSocket 是一种双向通信协议,在建立连接后...
  • websocket 机制

    2020-10-08 21:06:16
    跟http使用轮询实现不一样的是websocket一次连接成功后则可以重复进行请求和响应,更好地节省了服务器的资源与带宽websocket与http协议类似的是同样建立于tcp传输协议之上,通过tcp传输层进行数据传输。而客户端...
  • 一、WebSocket协议 ...在建立连接后,WebSocket服务器端和客户端都能主动向对方发送或接收数据,就像Socket一样; 2. WebSocket需要像TCP一样,先建立连接,连接成功后才能相互通信。 WebSo...
  • webSocket概念: 在WebSocket概念出来之前,如果页面要不停地显示最新的价格,那么必须不停地刷新页面,或者用一段js代码每隔几秒钟发消息询问服务器数据。 而使用WebSocket技术之后,当服务器有了新的数据,会...
  • Go实现Websocket

    2020-08-03 12:43:07
    WebSocket WebSocket 是独立的、创建在 TCP 上的协议。 ...WebSocket 是 HTML5 的重要特性,它实现了基于浏览器的远程socket,它使浏览器和服务器...在建立连接后,WebSocket服务器端和客户端都能主动向对方发送或接收数
  • websocket学习

    2020-05-20 16:03:43
    这样不停连接会大量消耗服务器带宽和资源。面对这种状况,HTML5定义了一个新的基于TCP的应用层协议----WebSocket协议,它能更好的节省服务器资源和带宽并实现真正意义上的实时推送。这种网络通信协议的特点就是持久...
  • WebSocket简介

    2019-12-07 20:25:33
    HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。在2008年诞生,2011年成为国际标准。现在基本所有浏览器都已经支持了。 **WebSocket是一种在单个TCP连接上进行全双工通信的...
  • Websocket协议

    2017-11-08 22:31:00
    1Websocket简介 1WebSocket protocol 是...HTML5定义了WebSocket协议,能更好的节省服务器资源和带宽并达到实时通讯 2Websocket原理 1他是基于TCP SOCKET上添加了一些上层协议。 2很多网站为了实现即时通信, 所...
  • 学习websocket

    2020-02-03 12:45:23
    为什么要引入websocket? http协议只能由客户端向服务器端发送请求!服务器端无法向客户端主动发送信息。...这样做很浪费带宽和时间。 websocket的出现就解决了这个问题。websocket是提供全双工通...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 320
精华内容 128
关键字:

websocket服务器带宽