简单实现websocket

最新推荐文章于 2024-08-30 01:35:49 发布

尤克里里没有海

最新推荐文章于 2024-08-30 01:35:49 发布

阅读量1.3k

点赞数 1

文章标签： websocket

本文链接：https://blog.csdn.net/qq_37793966/article/details/89440709

版权

简单实现websocket

websocket简介

websocket简介

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
更多介绍可以看看这个。 http://www.runoob.com/html/html5-websocket.html.

实现步骤

开启连接
客户端给服务端发送数据
服务端接收数据
服务端给客户端发送数据
客户端接收数据
监听三类基本事件：onopen（打开连接时的响应事件），onmessage（发送数据时的响应事件），onclose （关闭连接时的响应事件）

实现代码

demo项目结构如下：
在这里插入图片描述 DemoConfig.java

import java.util.Set;

import javax.websocket.Endpoint;
import javax.websocket.server.ServerApplicationConfig;
import javax.websocket.server.ServerEndpointConfig;

public class DemoConfig implements ServerApplicationConfig {

	@Override
	public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) {
		// TODO Auto-generated method stub
		System.out.println("config................"+scan.size());
		//可以提供过滤作用
		return scan;
	}

	@Override
	public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
		// TODO Auto-generated method stub
		return null;
	}

}

EchoServlet.java

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 EchoServlet {

	
	
	@OnOpen
	public void open(Session session) {
		//一个session代表一个通道会话
		System.out.println("sessionid:"+session.getId());
	}
	@OnClose
	public void close(Session session) {
		System.out.println("sessionid"+session.getId()+"通道关闭了");
	}
	@OnMessage
	public void message(Session session,String msg) {
		
		System.out.println("客户端说:"+msg);
		try {
			session.getBasicRemote().sendText("服务器说:你也好");
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		};
	}
}

index.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>

<script type="text/javascript">
var ws;//一个ws对象就是一个管道
var target="ws://localhost:8080/web_socket/echo"
function subOpen() {
	
    
     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){
    	 /* console.info(event.data); */
    	 var dv = document.getElementById('dv');
    	 dv.innerHTML+=event.data;
    	 
     }
 	
}
function subSend() {
	
	var msg=document.getElementById('msg').value;
	/* console.info(msg); */
	ws.send(msg);
	document.getElementById('msg').value="";
}
</script>
</head>
<body>
<button "subOpen();">open</button>
<input id="msg"/><button "subSend();">发送</button>
<div id="dv"></div>
</body>
</html>