JAVA实现简单的websocket网页回声(网页与服务器即时通讯)
WebSocket简介
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
简而言之就是http协议只支持客户端(网页)请求,服务器响应,想要实现实时刷新数据就需要在JavaScript里定义定义轮询,每一段时间提交一次请求,服务器接收以后响应而实现实时刷新,但是这样特别浪费带宽和性能,一百个客户端就会有一百个死循环在持续请求
而websocket的出现很好的解决了这个问题,通过websocket协议可以实现服务器与客户端一次握手之后的长链接回话,实现了服务器主动推送消息给前台页面,从而替代了早期的网页轮询模式
说这么多其实websocket的用处很大,但是饭要一口一口吃,我们从一个小demo开始:
首先看一下效果:
左边的是eclipse编译器的控制台打印的消息,右边是网页显示
当项目在tomcat容器中运行的时候,访问localhost:8080/项目名/index页面的时候就会出现如图所示的网页
服务端连接成功会调用链接成功,支持多网页多链接访问,当客户端发送文字给服务器页面的时候,会打印在控制台上,服务器会将文字原封不动的返回回去,也就是echo回声.
实现环境:
tomcat8.5(版本必须大于7),JavaEE eclipse,jdk1.8
开始开发之前需要拷贝两个jar包,在tomcat lib 目录中有:
如图我选中的两个jar包:
实现步骤:
1.编写websocketconfig配置类,实现ServerApplicationConfig接口
package com.shenlan;
import java.util.Set;
import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;
/**
* websocket核心配置类,会在tomcat加载的时候启动
* @author Oct.ca
*
*/
public class WebSocketConfig implements ServerApplicationConfig{
@Override
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> arg0) {
// TODO Auto-generated method stub
System.out.println("----------------------");
System.out.println("初始化加载的配置文件的个数 : "+arg0.size());
return arg0;
}
@Override
public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
// TODO Auto-generated method stub
return null;
}
}
2.编写服务器类
package com.shenlan;
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;
@ServerEndpoint("/echo")
public class EchoSocket {
@OnOpen
public void openSock(Session session){
System.out.println("名为"+session.getId()+"的链接打开了");
}
@OnMessage
public void onMesssage(String msg,Session session){
System.out.println("客户端"+session.getId()+"说->"+msg);
try {
session.getBasicRemote().sendText("服务器说:"+msg);
} catch (IOException e) {
e.printStackTrace();
}
}
@OnClose
public void closeSocket(Session session){
System.out.println("名为"+session.getId()+"的链接关闭了");
}
}
3.编写index.jsp作为客户端
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>websocket</title>
</head>
<body>
websocket实时反馈
<br />
<input id="text" type="text" />
<button onclick="send()">发送消息</button>
<hr />
<input type="button" value="关闭WebSocket连接"
onclick="closeWebSocket();">
<!-- <button οnclick="closeWebSocket()">关闭WebSocket连接</button> -->
<hr />
<div id="message"></div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("ws://localhost:8080/websocket01/echo");
} else {
alert('当前浏览器 Not support websocket')
}
//连接发生错误的回调方法
websocket.onerror = function() {
setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
setMessageInnerHTML("WebSocket连接成功");
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
setMessageInnerHTML(event.data);
}
//连接关闭的回调方法
websocket.onclose = function() {
setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML + '<br/>';
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
//发送消息
/* var btn = document.getElementById('btn');
btn.οnclick=function(){
var message = document.getElementById('text').value;
console.log(message);
websocket.send(message);
}
*/
//发送消息
function send() {
var message = document.getElementById('text').value;
console.log(message);
websocket.send(message);
}
</script>
</html>
这里需要注意的是 button自带一个onclick时间,某些情况下需要阻止才能触发js函数
最后运行代码,实现websocket多客户端与服务器长连接回声回话
这里模拟的是tomcat服务器自带的websocket example,有兴趣的可以去tomcat根目录找一下,看看源码自己学习一下,还有websocket实现贪吃蛇小游戏哦.
源码会稍后上传