WebSocket

huangyongxing310

浏览: 494103 次
性别:
来自: 广州

最近访客更多访客>>

hiroada

lixiaoxin

u012363178

wangyy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WEB
互联网
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;
});

分享到：

zooKeeper API 简单应用 | json序列化工具性能对比

2016-09-22 09:59
浏览 508
评论(0)
分类:互联网
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

WebSocket

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

WebSocket

评论

发表评论

相关推荐

选举算法

elasticSearch使用

IDEA 快捷键

zookeeper dubbo 安装

将博客搬至CSDN

docker mysql 主从安装

rocketmq安装部署.txt

百度人脸识别

springBoot tomcat配置参数说明

indexedDb TEST

技术选型

方便开发调试和问题跟踪

Jenkins脚本

test11223

longKey

base64与file 相互转换

jQuery Validate 校验

移动端调试神器

钉钉开发

textarea 特殊字符串处理

最近访客更多访客>>