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

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;
});











分享到:
评论

相关推荐

    养老院管理系统:SpringBoot与Vue前后端不分离架构的设计与实现

    内容概要:本文详细介绍了基于SpringBoot和Vue开发的养老院管理系统的具体实现细节。该系统采用前后端不分离的架构,旨在快速迭代并满足中小项目的开发需求。文中涵盖了多个关键技术点,如数据库设计(组合唯一约束、触发器)、定时任务(@Scheduled、@Async)、前端数据绑定(Vue的条件渲染和动态class绑定)、权限控制(RBAC模型、自定义注解)以及报表导出(SXSSFWorkbook流式导出)。此外,还讨论了开发过程中遇到的一些常见问题及其解决方案,如CSRF防护、静态资源配置、表单提交冲突等。 适合人群:具备一定Java和前端开发经验的研发人员,尤其是对SpringBoot和Vue有一定了解的开发者。 使用场景及目标:适用于需要快速开发中小型管理系统的团队,帮助他们理解如何利用SpringBoot和Vue进行全栈开发,掌握前后端不分离架构的优势和注意事项。 其他说明:文章不仅提供了详细的代码示例和技术要点,还分享了许多实用的小技巧和避坑指南,有助于提高开发效率和系统稳定性。

    家族企业如何应对人才流失问题?.doc

    家族企业如何应对人才流失问题?

    员工关怀制度.doc

    员工关怀制度.doc

    路径规划领域中基于排序搜索的蚁群算法优化及其应用

    内容概要:本文详细探讨了对传统蚁群算法进行改进的方法,特别是在路径规划领域的应用。主要改进措施包括:采用排序搜索机制,即在每轮迭代后对所有路径按长度排序并只强化前20%的优质路径;调整信息素更新规则,如引入动态蒸发系数和分级强化策略;优化路径选择策略,增加排序权重因子;以及实现动态地图调整,使算法能够快速适应环境变化。实验结果显示,改进后的算法在收敛速度上有显著提升,在复杂地形中的表现更加稳健。 适合人群:从事路径规划研究的技术人员、算法工程师、科研工作者。 使用场景及目标:适用于需要高效路径规划的应用场景,如物流配送、机器人导航、自动驾驶等领域。目标是提高路径规划的效率和准确性,减少不必要的迂回路径,确保在动态环境中快速响应变化。 其他说明:改进后的蚁群算法不仅提高了收敛速度,还增强了对复杂环境的适应能力。建议在实际应用中结合可视化工具进行调参,以便更好地观察和优化蚂蚁的探索轨迹。此外,还需注意避免过度依赖排序机制而导致的过拟合问题。

    基于PSO算法的配电网分布式光伏选址定容优化及其Matlab实现

    内容概要:本文详细介绍了利用粒子群优化(PSO)算法解决配电网中分布式光伏系统的选址与定容问题的方法。首先阐述了问题背景,即在复杂的配电网环境中选择合适的光伏安装位置和确定合理的装机容量,以降低网损、减小电压偏差并提高光伏消纳效率。接着展示了具体的PSO算法实现流程,包括粒子初始化、适应度函数构建、粒子位置更新规则以及越界处理机制等关键技术细节。文中还讨论了目标函数的设计思路,将多个相互制约的目标如网损、电压偏差和光伏消纳通过加权方式整合为单一评价标准。此外,作者分享了一些实践经验,例如采用前推回代法进行快速潮流计算,针对特定应用场景调整权重系数,以及引入随机波动模型模拟光伏出力特性。最终实验结果显示,经过优化后的方案能够显著提升系统的整体性能。 适用人群:从事电力系统规划与设计的专业人士,尤其是那些需要处理分布式能源集成问题的研究人员和技术人员。 使用场景及目标:适用于希望深入了解如何运用智能优化算法解决实际工程难题的人士;旨在帮助读者掌握PSO算法的具体应用方法,从而更好地应对配电网中分布式光伏系统的选址定容挑战。 其他说明:文中提供了完整的Matlab源代码片段,便于读者理解和复现研究结果;同时也提到了一些潜在改进方向,鼓励进一步探索和创新。

    Prius2004永磁同步电机设计:从Excel到MotorCAD的全流程解析与实战技巧

    内容概要:本文详细介绍了丰田Prius2004永磁同步电机的设计流程,涵盖从初始参数计算到最终温升仿真的各个环节。首先利用Excel进行基本参数计算,如铁芯叠厚、定子外径等,确保设计符合预期性能。接着使用Maxwell进行参数化仿真,通过Python脚本自动化调整磁钢尺寸和其他关键参数,优化电机性能并减少齿槽转矩。随后借助橡树岭实验室提供的实测数据验证仿真结果,确保模型准确性。最后采用MotorCAD进行温升仿真,优化冷却系统设计,确保电机运行安全可靠。文中还分享了许多实用技巧,如如何正确设置材料参数、避免常见的仿真错误等。 适合人群:从事电机设计的专业工程师和技术人员,尤其是对永磁同步电机设计感兴趣的读者。 使用场景及目标:适用于希望深入了解永磁同步电机设计全过程的技术人员,帮助他们在实际工作中提高设计效率和精度,解决常见问题,优化设计方案。 其他说明:文章提供了丰富的实战经验和具体的操作步骤,强调了理论与实践相结合的重要性。同时提醒读者注意一些容易忽视的细节,如材料参数的选择和仿真模型的准确性。

    基于DSP28335的单相逆变器设计方案与实现:涵盖ADC采样、PWM控制、锁相环及保护机制

    内容概要:本文详细介绍了基于DSP28335的单相逆变器的设计与实现,涵盖了多个关键技术模块。首先,ADC采样模块用于获取输入电压和电流的数据,确保后续控制的准确性。接着,PWM控制模块负责生成精确的脉宽调制信号,控制逆变器的工作状态。液晶显示模块则用于实时展示电压、电流等重要参数。单相锁相环电路实现了电网电压的频率和相位同步,确保逆变器输出的稳定性。最后,电路保护程序提供了过流保护等功能,保障系统的安全性。每个模块都有详细的代码示例和技术要点解析。 适合人群:具备一定嵌入式系统和电力电子基础知识的研发人员,尤其是对DSP28335感兴趣的工程师。 使用场景及目标:适用于单相逆变器项目的开发,帮助开发者理解和掌握各个模块的具体实现方法,提高系统的可靠性和性能。 其他说明:文中不仅提供了具体的代码实现,还分享了许多调试经验和常见问题的解决方案,有助于读者更好地理解和应用相关技术。

    SecureCRT安装包

    SecureCRT安装包

    C# WPF MVVM架构下的大屏看板3D可视化开发指南

    内容概要:本文详细介绍了如何利用C#、WPF和MVVM模式构建一个大屏看板3D可视化系统。主要内容涵盖WPF编程设计、自定义工业控件、数据库设计、MVVM架构应用以及典型的三层架构设计。文中不仅提供了具体的代码实例,还讨论了数据库连接配置、3D模型绑定、依赖属性注册等关键技术细节。此外,文章强调了项目开发过程中需要注意的问题,如3D坐标系换算、MVVM中命令传递、数据库连接字符串加密等。 适合人群:具备一定C#编程基础,对WPF和MVVM模式有一定了解的研发人员。 使用场景及目标:适用于希望深入了解WPF和MVVM模式在实际项目中应用的开发者,特别是那些从事工业控制系统、数据可视化平台开发的专业人士。通过学习本文,读者可以掌握如何构建高效、稳定的大屏看板3D可视化系统。 其他说明:本文提供的设计方案和技术实现方式,可以帮助开发者更好地理解和应用WPF和MVVM模式,同时也能为相关领域的项目开发提供有价值的参考。

    基于java SSM 框架的酒店管理系统.zip

    基于ssm的系统设计,包含sql文件(Spring+SpringMVC+MyBatis)

    非厄米超表面双参数传感器的COMSOL建模与应用

    内容概要:本文详细介绍了利用COMSOL进行非厄米超表面双参数传感器的设计与实现。首先,通过构建超表面单元并引入虚部折射率,实现了PT对称系统的增益-损耗交替分布。接着,通过频域扫描和参数化扫描,捕捉到了复频率空间中的能级劈裂现象,并找到了奇异点(Exceptional Point),从而显著提高了传感器对微小扰动的敏感度。此外,文章探讨了双参数检测的独特优势,如解耦温度和折射率变化的能力,并展示了其在病毒检测、工业流程监控等领域的潜在应用。 适合人群:从事光学传感器研究的专业人士,尤其是对非厄米系统和COMSOL仿真感兴趣的科研人员。 使用场景及目标:适用于需要高精度、多参数检测的应用场合,如生物医学检测、环境监测等。目标是提高传感器的灵敏度和分辨率,解决传统传感器中存在的参数交叉敏感问题。 其他说明:文中提供了详细的建模步骤和代码片段,帮助读者理解和重现实验结果。同时,强调了在建模过程中需要注意的关键技术和常见问题,如网格划分、参数设置等。

    怎样健全员工福利体系.docx

    怎样健全员工福利体系.docx

    离职证明范本.doc

    离职证明范本.doc

    6538b79724855900a9c930904a302920.part6

    6538b79724855900a9c930904a302920.part6

    员工离职单.doc

    员工离职单.doc

    COMSOL中超材料异常折射仿真的关键技术与实现

    内容概要:本文详细介绍了在COMSOL中进行超材料异常折射仿真的关键技术。首先解释了异常折射现象及其产生的原因,接着通过具体代码展示了如何利用相位梯度和结构色散精确计算折射角。文中还讨论了边界条件的设置、网格划分的优化以及参数化扫描的应用。此外,提供了多个实用脚本和技巧,帮助提高仿真的精度和效率。最后强调了验证结果的重要性和一些常见的注意事项。 适合人群:从事电磁仿真研究的专业人士,尤其是对超材料和异常折射感兴趣的科研人员和技术开发者。 使用场景及目标:适用于需要深入理解和解决超材料中异常折射问题的研究项目。主要目标是掌握COMSOL中异常折射仿真的完整流程,确保仿真结果的准确性并优化计算性能。 其他说明:文章不仅提供了详细的代码示例和技术细节,还分享了许多实践经验,有助于读者更好地应对实际仿真过程中可能出现的问题。

    招聘工作数据分析表.xls

    招聘工作数据分析表.xls

    platform-tools-latest-windows.zip

    platform-tools-latest-windows.zip

    个人资料临时存储QT资源

    个人资料临时存储QT资源

    微电网三相交流下垂控制技术详解:传统阻感型输出有功、无功及频率波形分析

    内容概要:本文详细介绍了微电网中三相交流下垂控制的工作原理和技术细节。首先,通过Matlab/Simulink搭建模型,展示了传统阻感型线路下垂特性的实现方法,特别是有功-频率和无功-电压下垂曲线的解析。文中强调了关键参数Kp和Kq的选择及其对系统稳定性的影响,并通过具体的仿真案例展示了不同参数设置下的动态响应。此外,文章讨论了波形分析中的注意事项,如谐波成分、滤波器设计以及虚拟阻抗的应用。最后,通过Python和C语言实现了下垂控制器的代码示例,进一步解释了实际工程中的实现细节。 适合人群:从事微电网研究和开发的技术人员,尤其是对下垂控制感兴趣的电气工程师和研究人员。 使用场景及目标:适用于希望深入了解微电网下垂控制原理及其实际应用的研究人员和技术人员。目标是帮助读者掌握下垂控制的核心概念和技术实现,提高在实际工程项目中的调试和优化能力。 其他说明:文章不仅提供了理论分析,还包括了大量的仿真代码和波形图,使读者能够更好地理解和验证所学内容。同时,文中提到的实际调试经验和常见错误也为初学者提供了宝贵的指导。

Global site tag (gtag.js) - Google Analytics