HTML5之WebSoket——html5+java servlet实现

最新推荐文章于 2022-01-11 00:14:38 发布

PleaseLieToMe

最新推荐文章于 2022-01-11 00:14:38 发布

阅读量2.2k

点赞数

分类专栏： html5 前端 websocket JAVA servlet 文章标签： html5 前端 websocket java servlet

本文链接：https://blog.csdn.net/Pleaselietome/article/details/52718082

版权

JAVA 同时被 3 个专栏收录

24 篇文章 0 订阅

订阅专栏

前端

2 篇文章 0 订阅

订阅专栏

servlet

2 篇文章 0 订阅

订阅专栏

一、概念

在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并达到实时通讯。（详情见百度百科。）

二、websocket与Ajax的区别

Ajax是短连接,每次使用都需要进行一轮握手和关闭连接操作,效率慢,耗费资源,更适合在进行简短、临时交互的场景使用。

websokcet是长连接,可以一个页面使用一个WebSoket,一次开关即可,在这期间可以进行服务器和客户端的实时交互,适合在服务器向客户端不定时推送数据的场景使用,如消息通知，在线聊天等。

三、JAVA后端

要使用websoket, 服务器的tomcat必须在7.0以上,建议在7.5以上

如果您的tomcat在7.0以上,却又缺少websocket一系列的jar包（一般是自带的）,请加入以下jar包：

websoket-api (这里面有两个jar，都需要加入)

tomcat-coyote-7.0.41.jar

建立一个WebsoketServlet 如下：

package com.gw.websocket;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.logging.Logger;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

@WebServlet(urlPatterns = "/login.ws")
public class HomePageServlet extends WebSocketServlet {

	// Log
	private Logger logger = Logger.getLogger(HomePageServlet.class.getName());
	@Override
	protected StreamInbound createWebSocketInbound(String arg0,
			HttpServletRequest arg1) {
		// Log
				logger.info("request ws servlet");

				// 方法仍然是返回一个StreamInbound实例，这里采用实现他的子类MessageInbound
				// 只用实现下面四个事件处理函数(其实onClose和onOpen有缺省实现)
				return new MessageInbound() {
					// WebSocket关闭事件，参数status应该来自org.apache.catalina.websocket.Constants中定义的几个常量，可以参考文档或者核对一下Tomcat的源码
					@Override
					protected void onClose(int status) {
						// Log
						logger.info("Web Socket Closed: " + status);
					}

					// WebSocket握手完成，创建完毕，WsOutbound用于向客户端发送数据
					@Override
					protected void onOpen(WsOutbound outbound) {
						// Log
						logger.info("Web Socket Open!");
					}
					@Override
					protected void onBinaryMessage(ByteBuffer buffer)
							throws IOException {
						// Log
						logger.info("Binary Message Receive: " + buffer.remaining());
						// Nothing
						
					}

					@Override
					protected void onTextMessage(CharBuffer buffer)
							throws IOException {
						// Log
						logger.info("Text Message Receive: " + buffer.remaining());
						// getWsOutbound可以返回当前的WsOutbound，通过他向客户端回传数据，这里采用的是nio的CharBuffer
						getWsOutbound().writeTextMessage(buffer);
						
					}

				};
	}

}

为了方便,这里的onTextMessage将客户端发来的buffer原封不动的发回去来检测连接,到这里,完毕,启动tomcat即可。

这个servlet的路径是 /login.ws 写在类名上的注解里。

四、html

<!DOCTYPE html>
<html>
	<head> 
		<title>Web Socket Demo</title> 
		<script type="text/javascript"> 
		var  ws = null; 

		function startServer() {
			// 设定WebSocket,注意协议是ws，请求是指向对应的WebSocketServlet的
			var url = "ws://127.0.0.1:8020/WALLE/login.ws";
			// 创建WebSocket实例，下面那个MozWebSocket是Firefox的实现
			if ('WebSocket' in window) { 
				ws = new WebSocket(url);
			} else if ('MozWebSocket' in window) { 
				ws = new MozWebSocket(url); 
			} else { 
				alert('此浏览器不支持WebSokcet,请更换浏览器使用,谢谢！.'); 
				return; 
			}

			// WebSocket握手完成，连接成功的回调
			ws.onopen = function() { 
				//alert('Opened!'); 
	        };

	        // 收到服务器发送的文本消息, event.data表示文本内容
			ws.onmessage = function(event) { 
				alert('Receive message: ' + event.data); 
			};

			// 关闭WebSocket的回调
			ws.onclose = function() {
				//alert('Closed!'); 
			};
		}

		function sendMyMessage() {
			//var textMessage = document.getElementById('textMessage').value;
			var msg=JSON.stringify({
		           username:"nihao",
		           password:"123456"
		        });
			ws.send(msg);
			
//			if(ws != null && textMessage != '') {
//				// 通过WebSocket想向服务器发送一个文本信息
//				ws.send(textMessage);
//			}
		}
		</script>
	</head>
	<body οnlοad="startServer()"> 
		<input type="text" id="textMessage" size="20" />
		<input type="button" οnclick="sendMyMessage()" value="Send">
	</body> 
</html>

PleaseLieToMe

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5之WebSoket——html5+java servlet实现

一、概念在浏览器中通过http仅能实现单向的通信,comet可以一定程度上模拟双向通信,但效率较低,并需要服务器有较好的支持; flash中的socket和xmlsocket可以实现真正的双向通信,通过 flex ajax bridge,可以在javascript中使用这两项功能. 可以预见,如果websocket一旦在浏览器中得到实现,将会替代上面两项技术,得到广泛的使用.面对这种状况，
复制链接

扫一扫

专栏目录