客户端关闭服务器收到消息推送消息,【网络编程】——WebSocket打开和关闭通道,消息发送...

HTML5给Web浏览器带来了全双工TCP链接WebSocket标准服务器的能力。浏览器和可以与服务器创建链接,经过已创建的通讯信道来发送和接收数据而不须要由HTTP协议入额外的开销。javascript

一、环境配置

jdk7或者是更高版本java

tomcat7或者更高版本web

二者版本保持一致(32位or64位)ajax

实现WebSocket技术须要的jar包api

在tomcat7.0中都包含,websocket-api.jar以及tomcat7-websocket.jar。tomcat7-websocket.jar是对websocket-api.jar的实现,二者缺一不可。浏览器

二、Websocket-api介绍

ServerApplicationConfig是websocket的程序入口,在tomcat启动时会自动启动,是websocket的核心配置类。tomcat

ServerApplicationConfig中包含两个方法,其实这两个方法的核心都是过滤,筛选配置websocket的类。服务器

getEndPointConfigs——经过实现类的方式获取全部配置websocket类websocket

getAnnotatedEndpointClasses——经过注解的方式获取配置websocket类,扫描src下全部类@serverEndpoint注解的类session

PS:Endpoint就是指一个websocket的一个服务端程序。

本文也将采用注解的方式进行配置。

import java.util.Set;

import javax.websocket.Endpoint;

import javax.websocket.server.ServerApplicationConfig;

import javax.websocket.server.ServerEndpointConfig;

/**

* @ClassName: DemoConfig

* @Description: 获取配置websocket的类

* @author 贾文静

* @date 2017-5-22 下午9:24:02

*

*/

public class DemoConfig implements ServerApplicationConfig

{

// 注解方式的启动

public Set> getAnnotatedEndpointClasses(Set> scan)

{

//检测系统中的websocket类

System.out.println("config......" + scan.size());

// 返回 在服务端注册websocket类,过滤的做用

return scan;

}

//实现类的方式

public Set getEndpointConfigs(

Set> arg0)

{

return null;

}

}

三、创建通讯信道

创建通讯信道是WebSocket技术实现的关键!

服务端

服务端建立一个websocket的链接请求,为了方便把服务端处理请求的几个方法一并书写

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;

//websocket的链接请求的地址

@ServerEndpoint("/echo") //这一部分和客户端是对应的,特别重要!!!

public class EchoSocket

{

public EchoSocket()

{

System.out.println("EchoSocket.EchoSocket()");

}

//对onpen给予反应应答,注入一个session对象

@OnOpen

public void open(Session session)

{

// 一个session惟一表明一个通讯会话

//经过sessionid区分链接

System.out.println("sessionid:" + session.getId());

}

//关闭管道

@OnClose

public void close(Session session)

{

System.out.println("session:" + session.getId() + "关闭了。。。。。。");

}

//发送消息

@OnMessage

public void message(Session session, String msg)

{

System.out.println("客户端:" + msg);

// 服务端对客户的消息给予应答

try

{

session.getBasicRemote().sendText("服务器端:in hao too");

}

catch (IOException e)

{

e.printStackTrace();

}

}

}

客户端

利用JavaScript进行处理,在这一部分一样有一个websocket链接地址的配置,存储到target对象中。

var ws;//一个ws对象就是一个通讯管道

//target就是要链接服务端的地址 恰好和服务端的websocket进行匹配和服务器端中表重要部分对应

var target = "ws://localhost:8888/websocket_01/echo";

function subOpen(){

//相似于ajax中兼容浏览器的处理

if("WebSocket"in window){

ws = new WebSocket(target);

}else if("MozWebSocket" in window){

ws = new MozWebSocket(target);

}else{

alert("WebSocket is not supported by this browser.");

return;

}

//获取客户端的消息,传递到服务端

ws.onmessage=function(event){

var dv = document.getElementById("dv");

dv.innerHTML+=event.data;

};

}

//发送消息的事件

function subSend(){

var msg = document.getElementById("msg").value;

ws.send(msg);

document.getElementById("msg").value = "";

}

open

send

当程序启动后,观察后台的打印状况,程序中检测到一个websocket类。

a98328b87f4c48d3b44670f231eaa59a.gif

进入程序界面,点击【open】,启动调试模式,观察连接调用

a98328b87f4c48d3b44670f231eaa59a.png

采用websocket的,URL是ws或者是wss开头,wss表明加密以后的。

在客户端文本框中输入消息后发送,注意前台的输出和后台的打印状况,其实在通道打开的过程当中,实现了消息的通讯。

a98328b87f4c48d3b44670f231eaa59a.png

【总结】

消息通道的打开和信息传递只是其中很基础的一部份内容,作好基础后,将后开启后续的操做,实现聊天以及群聊之类。同时也渐渐发现随着技术的深刻,感受这个科技中的神秘感愈来愈少。。。。。。