假设面试官问你:要把server端的数据时时显示在浏览器上怎么实现?我想有非常多人会回答使用Ajax技术定时去訪问一个资源,没错,使用Ajax的确能实现。但面试官要的绝对不是这个答案。

由于使用Ajax频繁訪问给服务端造成太大的压力,所以在大部分情况下都是不取的。面试官想要的答案应该是将server端的数据推送至浏览器,这样仅仅须要保持一个长链接就能够了。

socket.io就能实现数据的时时推送,socket.io(官网:http://socket.io/)是一个跨平台。多种连接方式自己主动切换时时引擎。要说明的是,socket.io.js仅仅能完毕client功能,还须要server端的实现才干真正完毕数据的推送。socket.io官方给出的样例服务端使用node.js实现,我想还有非常多人对node.js是陌生的(me
too)。

socket.io服务端实现能够有多种语言,应该说仅仅要能支持socket协议就能够。

以下的样例将给出两个java语言的服务端实现及其使用演示样例。演示样例内容非常easy,就是在服务端随机产生一个坐标(包括x,y值),然后将其推送至浏览器并显示。我想会推送一个坐标值,推送其他数据应该也不是问题。

第一种实现、netty-socketio,坐标为:com.corundumstudio.socketio:netty-socketio:1.7.3(gradle)。假设使用的是maven。则坐标为:

<groupId>com.corundumstudio.socketio</groupId>
<artifactId>netty-socketio</artifactId>
<version>1.7.3</version>

a.服务端代码:

public class Server {
private static List<SocketIOClient> clients = new ArrayList<SocketIOClient>();//用于保存全部客户端 public static void main(String[] args) throws Exception {
Configuration configuration = new Configuration();
configuration.setHostname("127.0.0.1");//设置主机名
configuration.setPort(8082);//设置监听的port号
SocketIOServer server = new SocketIOServer(configuration);//依据配置创建服务器对象 server.addConnectListener(new ConnectListener() {//加入客户端连接监听器
@Override
public void onConnect(SocketIOClient client) {
System.out.println("connected:SessionId=" + client.getSessionId());
clients.add(client);//保存客户端
}
}); server.start();
System.out.println("server started");
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
Random random = new Random();
for(SocketIOClient client : clients) {
client.sendEvent("pushpoint", new Point(random.nextInt(100), random.nextInt(100)));//每隔一秒推送一次
}
}
}, 1000, 1000); Object object = new Object();
synchronized (object) {
object.wait();
}
} }

b.Point类:

public class Point {
private int x;
private int y; public Point(int x, int y) {
this.x = x;
this.y = y;
} //getter,setter
}

c.html页面:

<!DOCTYPE html>
<html>
<head>
<title>netty-socketio測试</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="socket.io/socket.io-1.0.6.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var socket = io.connect('http://127.0.0.1:8082');
//监听名为pushpoint的事件,这与服务端推送的那个事件名称必须一致
socket.on("pushpoint", function(data){
$('#x').text(data.x);
$('#y').text(data.y);
});
}); </script>
</head> <body> <div id="display" style="height:50px;background-color:grey;">
x=<span id="x">0</span>, y=<span id="y">0</span>
</div> </body> </html>

另外一种实现、socketio-netty(上面一个是netty-socketio),这个实如今maven中央库中好像还没有,该项目托管在google code上,项目地址为:http://code.google.com/p/socketio-netty/。本人是把它下载下来后手动安装在私服上的。现已上传至:http://download.csdn.net/detail/xtayfjpk/9720229,可供下载。

a.服务端代码:

public class Server2 {
private static List<IOClient> clients = new ArrayList<IOClient>(); public static void main(String[] args) throws Exception {
SocketIOServer ioServer = new SocketIOServer(new IOHandlerAbs() { @Override
public void OnShutdown() {
System.out.println("shut down");
} @Override
public void OnMessage(IOClient client, String eventName) {
System.out.println("receive message,eventName=" + eventName);
} @Override
public void OnDisconnect(IOClient client) {
System.out.println("disconnect");
System.out.println("disconnect");
} @Override
public void OnConnect(IOClient client) {
System.out.println("connect");
clients.add(client);
}
}, 8088); ioServer.start();
System.out.println("server started");
Timer timer = new Timer();
timer.schedule(new TimerTask() {
@Override
public void run() {
Random random = new Random();
String data = "{\"x\":" +random.nextInt(100)+ ",\"y\":" +random.nextInt(100)+ "}";
BASE64Encoder encoder = new BASE64Encoder();
data = encoder.encode(data.getBytes());
for(IOClient client : clients) {
client.send(formatMessage(data));
}
}
}, 1000, 1000); Object object = new Object();
synchronized (object) {
object.wait();
}
} private static String formatMessage(String data) {
return String.format(
"5:::{\"%s\":\"%s\",\"%s\":[\"%s\"]}",//socket.io字符串格式
"name",
"push",//事件名称
"args",
data//携带的数据
);
}
}

须要说明的是。该实现不能像上一个实现一样发送一个对象,仅仅能发送一个字符串,并且该字符串中还不能包括双引號(或许还有其他特殊字符)。

而推送过程中我们使用的数据格式非常可能是JSON。那就肯定有双引號,所以这里採取的办法是对要发送的数据进行BASE64编码。然后在client解码回来得到我们想要的数据。

b.html页面:

<!DOCTYPE html>
<html>
<head>
<title>socketio-netty測试</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script src="socket.io/socket.io-0.9.6.js"></script>
<script src="crypto-js/core-min.js"></script>
<script src="crypto-js/enc-base64-min.js"></script>
<script src="crypto-js/enc-utf16-min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script>
$(function(){
var host = "http://127.0.0.1:8088";
var socket = null;
if(/MSIE (\d+.\d+);/.test(navigator.userAgent)){
if(/MSIE 10(.\d+);/.test(navigator.userAgent)){
socket = io.connect(host);
}else{
socket = io.connect(host,{transports:['jsonp-polling']});
}
} else {
socket = io.connect(host,{transports:['websocket','flashsocket','htmlfile','xhr-polling','jsonp-polling']});
} socket.on("push", function(data){
var words = CryptoJS.enc.Base64.parse(data);
var point = CryptoJS.enc.Utf8.stringify(words);
point = JSON.parse(point);
$('#x').text(point.x);
$('#y').text(point.y);
});
}); </script>
</head> <body> <div id="display" style="height:50px;background-color:grey;">
x=<span id="x">0</span>, y=<span id="y">0</span>
</div> </body> </html>

第一个样例中实现的socket.io版本号为1.0.6。第二个使用的版本号为0.9.6。这两种服务端实现都是基于netty框架的,但个人认为还是第一种实现比較好用,省去了编码的过程,并且封装程度更高。

演示样例代码project已托管在GitHub中,使用gradle进行构建,地址为:https://github.com/xtayfjpk/socketio-test

仅仅要将其捡出就可以执行。

socketio server推送的更多相关文章

  1. Web端server推送技术原理分析及dwr框架简单的使用

    1 背景 "server推送技术"(ServerPushing)是近期Web技术中最热门的一个流行术语.它是继"Ajax"之后又一个倍受追捧的Web技术.&qu ...

  2. SQL Server 2000向SQL Server 2008 R2推送数据

    [文章摘要]最近做的一个项目要获取存在于其他服务器的一些数据,为了安全起见,采用由其他“服务器”向我们服务器推送的方式实现.我们服务器使用的是SQL Server 2008 R2,其他“服务器”使用的 ...

  3. Webserver推送技术

    server推送(Server Push) 推送技术的基础思想是将浏览器主动查询信息改为server主动发送信息.server发送一批数据,浏览器显示这些数据,同一时候保证与server的连接.当se ...

  4. iOS8推送消息的回复处理速度

    iOS8我们有一个新的通知中心,我们有一个新的通报机制.当在屏幕的顶部仅需要接收一个推拉向下,你可以看到高速接口,天赋并不需要输入应用程序的操作.锁定屏幕,用于高速处理可以推动项目. 推送信息,再次提 ...

  5. iOS极光推送SDK的使用流程

    一.极光推送简介 极光推送是一个端到端的推送服务,使得服务器端消息能够及时地推送到终端用户手机上,整合了iOS.Android和WP平台的统一推送服务.使用起来方便简单,已于集成,解决了原生远程推送繁 ...

  6. androidpn 推送系统

    (文中部分内容来自网络,如无意中侵犯了版权,请告之!) XMPP协议: XMPP : The Extensible Messaging andPresence Protocol. 中文全称:可扩展通讯 ...

  7. 使用vlc实现视频TS流的推送

    鉴于Mpeg TS流播放的需求,使用 VLC作为Server来实现输出Mpeg TS    本文仅涉及如何使用VLC的Command来实现作为视频流Server通常可以使用下述四种方式来推送Mpeg ...

  8. 李洪强iOS之集成极光推送一iOS SDK概述

    李洪强iOS之集成极光推送一iOS SDK概述 JPush iOS 从上图可以看出,JPush iOS Push 包括 2 个部分,APNs 推送(代理),与 JPush 应用内消息. 红色部分是 A ...

  9. java集成jpush实现客户端推送

    代码地址如下:http://www.demodashi.com/demo/13700.html 前言 java 集成jpush 实现客户端推送 一.准备工作 开发环境: jdk1.6 Eclipse ...

随机推荐

  1. 机器学习之路:python 特征降维 主成分分析 PCA

    主成分分析: 降低特征维度的方法. 不会抛弃某一列特征, 而是利用线性代数的计算,将某一维度特征投影到其他维度上去, 尽量小的损失被投影的维度特征 api使用: estimator = PCA(n_c ...

  2. 【WIN10】Toast 通知

    DEMO下載:http://yunpan.cn/cFSLZQf5ePeTV  访问密码 1fce 1.顯示通知 使用xml確定通知內容. string xml = "<toast la ...

  3. POJ 3678 Katu Puzzle 2-SAT 强连通分量 tarjan

    http://poj.org/problem?id=3678 给m条连接两个点的边,每条边有一个权值0或1,有一个运算方式and.or或xor,要求和这条边相连的两个点经过边上的运算后的结果是边的权值 ...

  4. python开发_函数的参数传递

    在这个用例中,我们要讨论的是关于函数的传参问题 我所使用的python版本为3.3.2 对于函数: def fun(arg): print(arg) def main(): fun('hello,Ho ...

  5. angularjs中如何在异步请求执行完以后再执行其他函数?

    angularjs中如何在异步请求执行完以后再执行其他函数? 之前脑袋回路就是从上到下的执行js,直到有一次我的页面上已经显示了空才走到angularjs里的$http的成功回调函数里,然后才开始正视 ...

  6. Android R资源文件无法更新或丢失

    开发Android应用的时候,经常容易发生R文件丢失的事. 根据我的经验是当你更新了drawable里面的文件时,正好xml文件有错误, 这样会导致R文件出错. 此时如果你clean整个project ...

  7. Effective OC : 1-5

    1,了解Objective-C语言的起源: OC为C语言的超集,为C加入了面向对象的特性. 要理解C中的指针和内存模型. 2.在类文件里尽量少引入其它头文件: 引入过多头文件.将借口暴露,添加耦合度. ...

  8. 初识云计算的三种服务模式 (IaaS SaaS PaaS)

    近期公司在使用其它云服务的同一时候.要封装自己的云服务,以下作为开发产品前的热身.来了解云计算中的三种服务模式,笔者也是从网络上查找,进行综合总结.请拍.. 三种服务模式 依据如今最经常使用.也就是比 ...

  9. 系统字体的Regular、Light等几种名称的区别

    以苹果系统中的PingFang SC系列字体为例,其中常见的有下面几种类型可以细分如下. PingFang SC ExtraLight         苹方 特细 PingFang SC Light  ...

  10. C#(静态String类)

    [转]http://blog.csdn.net/angelazy/article/details/8501776 C#中提供了比较全面的字符串处理方法,很多函数都进行了封装为我们的编程工作提供了很大的 ...