`
huangyongxing310
  • 浏览: 483688 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

WebSocket

WebSocket 
阅读更多
WebSocket

1.WebSocket protocol 是HTML5一种新的协议。它是实现了浏览器与服务器全双工通信(full-duplex)。HTML5定义了WebSocket协议，
能更好的节省服务器资源和带宽并达到实时通讯。
2.WebSocket是为解决客户端与服务端实时通信而产生的技术。其本质是先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，
此后服务端与客户端通过此TCP连接进行实时通信。
3.借用了HTTP的协议来完成一部分握手。在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。
4.Websocket服务器端程序运行结束就会发出关闭事件给前端
5.长连接可能是基于类似于socket长连接的心跳包机制来进行连接状态的维护



websocket的优点
以前我们实现推送技术，用的都是轮询，在特点的时间间隔有浏览器自动发出请求，将服务器的消息主动的拉回来，在这种情况下，我们需要不断的向服务器
发送请求，然而HTTP request 的header是非常长的，里面包含的数据可能只是一个很小的值，这样会占用很多的带宽和服务器资源。会占用大量的带宽和服
务器资源。



例子：
HTML(客户端) 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>websocketTest</title>
</head>
<body>
<div>
    <input type="button" value="connect" onclick="connectfn()"/>
</div>
<div>
    <input type="button" value="Start" onclick="start()"/>
</div>
<div>
    <input type="button" value="close" onclick="closefn()"/>
</div>
<div id="messages"></div>
<script type="text/javascript">
    var webSocket =
            new WebSocket('ws://127.0.0.1:8080/CESmart/WebSocketTest');

    //产生异常
    webSocket.onerror = function (event) {
        onError(event)
    };

    //已经建立连接
    webSocket.onopen = function (event) {
        onOpen(event)
    };

    //收到服务器消息，使用evt.data提取
    webSocket.onmessage = function (event) {
        onMessage(event)
    };

    //已经关闭连接
    webSocket.onclose = function (event) {
        alert("onclose");
        webSocket.close();
    };

    function onMessage(event) {
        document.getElementById('messages').innerHTML
                += '<br />' + event.data;
    }

    function onOpen(event) {
        alert("onOpen");
        document.getElementById('messages').innerHTML
                = 'Connection established';
    }

    function onError(event) {
        alert(event.data);
    }

    function start() {
        alert("start");
        webSocket.send('hello');
        //return false;
    }

    function closefn() {
        alert("close");
        webSocket.send('close');
        webSocket.close();
        webSocket = null;
    }
    function connectfn() {
        alert("connectfn");
        if (webSocket == null) {
            alert("webSocket == null");
            webSocket =
                    new WebSocket('ws://127.0.0.1:8080/CESmart/WebSocketTest');
//收到服务器消息，使用evt.data提取
            webSocket.onmessage = function (event) {
                alert("onmessage");
                onMessage(event)
            };
        }
    }

    window.onbeforeunload = function () {
        alert("onbeforeunload");
        webSocket.send('close'); //发送关闭请求让服务器关闭链接
        webSocket.close();//关闭TCP连接
        webSocket = null;
        return false; // 可以阻止关闭
    }
</script>
</body>
</html>



java(服务器) 
package com.proserver.common.controller.WebSocket;

import java.io.IOException;

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

@ServerEndpoint("/WebSocketTest") // 这里表示定义WebSocket的接入点
public class WebSocketTest {
	// 接收消息处理
	@OnMessage
	public void onMessage(Session session, String message) {
		System.out.println("webSocket onMessage message == " + message);
		if (session != null) {
			try {
				session.getBasicRemote().sendText("Server Test!<br>");
			} catch (IOException e) {
				e.printStackTrace();
			}
		} else {
			System.out.println("this.session == null");
		}

		if (message.equals("close")) {
			System.out.println("this.session message == close");
			try {
				session.close();// 关闭连接
			} catch (IOException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}
		}

	}

	// 新的WebSocket请求开启
	@OnOpen
	public void onOpen(Session session) {
		System.out.println("webSocket onOpen");
	}

	// WebSocket请求关闭
	@OnClose
	public void onClose(Session session) {
		System.out.println("webSocket onClose");
		if (session != null) {
			try {
				session.close();
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

	// WebSocket出错
	@OnError
	public void onError(Throwable thr) {
		System.out.println("onError");
		thr.printStackTrace();
	}
}



//如果要从服务推送到WEB，就是要用MAP保存USE与chanle的对应关系


public void onOpen(Session session, @PathParam("ip") String ip)//传参数方式



goeasy//第三方方案



参考原文：https://www.web-tinker.com/article/20310.html 





/**
deviceDebugController.js
 */
angular.module("rideshare").controller("deviceDebugController", function ($scope) {
    //$scope.inputString = "123456345";

    $scope.inputString = 10;

    var webSocket = new WebSocket('ws://ce5.midea.com:8080/mdot/logWebSocket');
    webSocket.onerror = function (event) {
        onError(event)
    };

    webSocket.onopen = function (event) {
        onOpen(event)
    };

    webSocket.onmessage = function (event) {
        onMessage(event)
    };

    function onMessage(event) {
        var stringorg = event.data;
        var myHtml = $scope.inputString;
        var re = new RegExp(myHtml, "gm");

        stringorg = stringorg.replace(re, "<span style=\"background: #CCFF99; color:red; \">" + myHtml + "</span>");
        $("#log-container div").append(stringorg);
        $scope.$apply();
        $("#log-container").scrollTop($("#log-container div").height() - $("#log-container").height());
    }


    function onOpen(event) {
    }

    function onError(event) {
        alert(event.data);
    }

    function start() {
        webSocket.send($scope.inputString);
    }

    function stopFn() {
        console.info("_C_L_O_S_E_");
        webSocket.send("_C_L_O_S_E_");
    }

    function cleanScreen() {
        $("#log-container div").empty();
    }

    $scope.start = start;
    $scope.stopFn = stopFn;
    $scope.cleanScreen = cleanScreen;
});











分享到：
| json序列化工具性能对比
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DelphiWebsockets-master.zip_delphi websocket_websocket_websocket

    在Delphi编程环境中，WebSocket技术可以极大地提升应用程序的交互性和实时性，尤其是在开发需要实时数据更新的桌面或移动应用时。 DelphiWebsockets-master.zip是一个包含Delphi WebSocket实现的项目资源压缩包。这...

    C#实现WebSocket协议客户端和服务器websocket sharp组件实例解析

    WebSocket Sharp 是一个C#实现的WebSocket协议库，它支持客户端和服务端的功能，符合RFC 6455标准。这个组件不仅提供了基本的WebSocket连接管理，还包含了一些高级特性，如消息压缩、安全连接、HTTP身份验证、代理...

    若依WebSocket集成

    WebSocket是一种在客户端和服务器之间建立长连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在若依框架中集成WebSocket，可以为用户带来更流畅、即时的交互体验，尤其...

    html页面测试websocket

    WebSocket是Web应用中一种在客户端和服务器之间建立长连接的协议，它允许双方进行全双工通信，极大地提高了数据传输效率。在这个“html页面测试websocket”的项目中，我们可以看到几个关键文件：`index.html`、`...

    websocket断线重连 websocket JS框架

    WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在Web应用中，WebSocket为开发者提供了实时交互的能力，常用于在线聊天...

    C语言实现的websocket

    WebSocket是一种在客户端和服务器之间建立持久连接的网络通信协议，它允许双向通信，即服务器和客户端都可以主动发送数据。在Web开发中，WebSocket为实时应用提供了高效、低延迟的解决方案，比如在线聊天、股票交易...

    简单实现了websocket功能：websocket客户端、winformsocket客户端

    WebSocket是一种在客户端与服务器之间建立持久连接的协议，它允许双方进行全双工通信，即数据可以在两个方向上同时传输，极大地提高了实时性。在本项目中，"简单实现了websocket功能：websocket客户端、winform...

    Spring+Netty+WebSocket实例

    在现代Web开发中，实时通信已经成为一个不可或缺的功能，Spring、Netty和WebSocket的结合为构建高性能、低延迟的实时应用提供了强大的解决方案。本实例将详细探讨如何利用这三种技术进行集成，实现高效的双向通信。 ...

    websocket-sharp 范例

    WebSocketSharp是一个针对C#开发的开源库，它允许开发者在.NET Framework 4.0和3.5环境下构建WebSocket服务和客户端。WebSocket协议是一种在互联网上实时通信（RTC）的技术，它提供了一种低延迟、全双工的通信机制，...

    springboot+websocket分布式实现

    WebSocket是一种在客户端和服务器之间建立长连接的协议，它提供了双向通信的能力，即服务器和客户端都可以主动发送数据。SpringBoot是Java开发中的一个轻量级框架，它简化了创建独立的、生产级别的基于Spring的应用...

    spring+websocketdemo

    WebSocket是Web交互技术的一种革新，它为实时双向通信提供了标准协议。在传统的HTTP协议中，客户端与服务器之间的通信是请求-响应模式，而WebSocket则允许持久连接，使得数据可以双向实时传输，极大地优化了实时应用...

    websocket-fmp4、websocket-flv 视频播放器 web端 wsplayer

    WebSocket-FMP4与WebSocket-FLV视频播放器在Web端的应用是现代互联网实时通信技术的重要实践，其中wsplayer是一款常见的实现此类功能的播放器。本文将深入探讨WebSocket协议、FMP4与FLV格式以及wsplayer播放器的相关...

    MFC实现WebSocket通信

    WebSocket是一种在客户端和服务器之间建立持久连接的网络通信协议，它允许双向实时数据传输，极大地提高了Web应用的性能。在本项目中，我们将利用Microsoft Foundation Classes (MFC) 框架，用C++编程语言在Visual ...

    websocket聊天室，学习websocket的好例子。

    WebSocket是Web交互技术的一种，它允许在客户端和服务器之间建立持久的、低延迟的双向连接。这个技术在2011年被W3C标准化，为实时应用如在线游戏、股票交易、聊天室等提供了高效的数据传输方式。WebSocket API设计得...

    websocket++库

    WebSocket++库是一个开源的C++库，专门用于实现WebSocket协议，该协议允许在Web浏览器和其他服务器之间进行全双工通信。WebSocket++库的设计目标是提供一个轻量级、高效且易于使用的WebSocket客户端和服务器实现，它...

    weblogic websocket示例代码

    WebSocket是Web交互技术的一种，它允许在客户端和服务器之间建立持久的、低延迟的双向通信。WebLogic Server作为Oracle提供的企业级Java应用服务器，支持WebSocket协议，为开发者提供了在Java EE环境中实现WebSocket...

    vue封装websocket.zip

    在现代Web应用中，实时通信是不可或缺的功能之一，WebSocket则提供了双向通信的能力，使得服务器与客户端能实时交换数据。在Vue项目中，对WebSocket进行封装能够提高代码的可维护性和重用性。 首先，让我们深入理解...

    C# 开发 websocket 服务端和客户端

    总结来说，C#开发WebSocket服务端和客户端涉及的主要知识点有：WebSocket协议原理，使用WebSocketSharp库创建WebSocket服务端和客户端，以及Windows桌面应用的系统托盘功能。通过这些知识，开发者可以构建出实时、...

    websocket与易语言通讯(源码)

    在易语言中实现WebSocket通讯，可以极大地提升网络应用的交互性，特别是对于需要实时更新数据的场景，如在线游戏、股票行情、聊天室等。 易语言是一门以中文编程为特色的编程语言，它以简洁直观的语法设计，使得...

    C# IIS webSocket 实例

    WebSocket是一种在客户端和服务器之间建立持久连接的协议，它允许双方进行双向通信，极大地提高了实时性。在IT行业中，尤其是在开发实时应用如在线聊天、股票交易、多人在线游戏等场景时，WebSocket已经成为首选的...

Magicbox
Global site tag (gtag.js) - Google Analytics