java WebSocket服务端和客户端实现

沧海一小粟

浏览: 25092 次
性别:
来自: 北京

最近访客更多访客>>

refus

tanweiwen

qqpkat2

claram

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

WebSocket

websocket

最近接到老大指示，研究下WebSocket是个神马东东，接到指示后疯狂百度，四天下来把网上的demo试了N次，但没一次成功，还买了一本入门的书，按书上的第一个demo，最后的结果是，tomcat运行正常，但是ws访问一直失败。当然最后找到了原因，我不得不说，网上那些demo其实没错（大部分），只是有些关键点没说明白，不然我也不会瞎折腾四天。

介绍WebSocket的内容我就不说了，网上一大堆，这篇文章主要讲解下，java实现简单的webSocket通信，希望对同样和我一样刚开始学习WebSocket的朋友有点帮助！！！

一、环境：tomcat8.5.12 + jdk1.8.0_121，另外需要依赖一个jar包：Java-WebSocket-1.3.0.jar，eclipse最好用3.6以上，我的是Version: Luna Release (4.4.0)，听说3.6及以上版本才支持WebSocket。

二、准备好以上的环境后，开始新建一个Web项目：

1.java编写WebSocket服务端，其实这个类相当简单，只是简单的在接收到客户端消息后告诉客户端接收到的消息，代码如下：

import javax.websocket.OnMessage;
import javax.websocket.server.ServerEndpoint;


@ServerEndpoint("/websocket/demo")//这里是一个类注解，告诉虚拟机该类被注解为一个WebSocket端点
public class MyServer {

	@OnMessage		//这里是方法注解，在接收到客户端的消息时触发
	public String echo(String clientMessage){
		return "收到来自客户端的消息：" + clientMessage;
	}
}

到此服务器端就完成了。
2.编写客户端，这里用一个html来实现：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSocket Client</title>

<script type="text/javascript" language="javascript">
	var websocket;
	
	function init()
	{
		output = document.getElementById("output");
	}
	
	function send()
	{
		var wsUri = "ws://localhost:8080/WebSocketDemo1/websocket/demo";
		writeToScreen("Connecting to : "+ wsUri);
		websocket = new WebSocket(wsUri);
		websocket.onopen = function(evt)
		{
			writeToScreen("Connect Success!");
			doSend(document.getElementById("textID").value);
		};
		websocket.onmessage = function(evt)
		{
			writeToScreen("Received Message: "+ evt.data);
			websocket.close();
		};
		websocket.onerror = function (evt)
		{
			writeToScreen('<span style="color:red;">ERROR:</span>'+evt.data);
		};
	}
	function doSend(message)
	{
		websocket.send(message);
		writeToScreen("Send Message : "+message);
	}
	
	function writeToScreen(message)
	{
		var pre = document.createElement("p");
		pre.style.wordWrap = "break-word";
		pre.innerHTML = message;
		output.appendChild(pre)
	}
	
	window.addEventListener("load", init, false);
	
</script>
</head>
<body>
	<h1>WebSocket Client</h1>
	
	<div style="text-align:left;">
	<form action="">
		<input onclick="send()" value="Send Message" type="button">
		<input id="textID" name="message" value="Hello Web Socket" type="text">
		<br>
	</form>
	
	</div>
	<div id="output"></div>
</body>
</html>

到这里，客户端就完成了。

三、这步也是我在网上看的demo没有描述详细的地方：发布WebSocket服务端程序，将项目直接copy到tomcat的webapps目录下如图：

启动服务，然后访问项目的首页（IE10或以上，谷歌浏览器，具体可搜下哪些浏览器支持）：

ps:1.在服务器端程序中，注解类的参数：/websocket/demo,这个与在jsp页面中ws地址后的一致，如果服务器端这样写：/demo,则jsp中的uri为：ws://localhost:8080/WebSocketDemo1/demo
2.在tomcat中发布程序时，一定要注意，webapps下项目点进去后一定要能找到WEB-INF这个文件夹，我开始时就是因为eclipse建好项目后直接放到该目录下，但是在建项目时，classes文件保存目录没设置好，一直没成功。