websocket 使用demo （2）

最新推荐文章于 2020-11-24 15:00:25 发布

liuwei063608

最新推荐文章于 2020-11-24 15:00:25 发布

阅读量595

点赞数

web servlet方式

html

<!DOCTYPE HTML>
<html>
<head>
<title>WebSocket demo</title>
<style>
body {padding: 40px;}
#outputPanel {margin: 10px;padding:10px;background: #eee;border: 1px solid #000;min-height: 300px;}
</style>
</head>
<body>
<input type="text" id="messagebox" size="60" />
<input type="button" id="buttonSend" value="Send Message" />
<input type="button" id="buttonConnect" value="Connect to server" />
<input type="button" id="buttonClose" value="Disconnect" />
<br>
<!-- <% out.println("Session ID = " + session.getId()); %> -->
<div id="outputPanel"></div>
</body>
<script type="text/javascript">
	var infoPanel = document.getElementById('outputPanel'); // 输出结果面板
	var textBox = document.getElementById('messagebox');	// 消息输入框
	var sendButton = document.getElementById('buttonSend');	// 发送消息按钮
	var connButton = document.getElementById('buttonConnect');// 建立连接按钮
	var discButton = document.getElementById('buttonClose');// 断开连接按钮
	// 控制台输出对象
	var console = {log : function(text) {infoPanel.innerHTML += text + "<br>";}};
	// WebSocket演示对象
	var demo = {
		socket : null, 	// WebSocket连接对象
		host : 'ws://localhost:8080/a/websocket/say',		// WebSocket连接 url
		connect : function() { 	// 连接服务器
			window.WebSocket = window.WebSocket || window.MozWebSocket;
			if (!window.WebSocket) {	// 检测浏览器支持
				console.log('Error: WebSocket is not supported .');
				return;
			}
			this.socket = new WebSocket(this.host); // 创建连接并注册响应函数
			this.socket.onopen = function(){console.log("websocket is opened .");};
			this.socket.onmessage = function(message) {console.log(message.data);};
			this.socket.onclose = function(){
				console.log("websocket is closed .");
				demo.socket = null; // 清理
			};
		},
		send : function(message) {	// 发送消息方法
			if (this.socket) {
				this.socket.send(message);
				return true;
			}
			console.log('please connect to the server first !!!');
			return false;
		}
	};
	// 初始化WebSocket连接 url
	//demo.host=(window.location.protocol == 'http:') ? 'ws://localhost:8080' : 'wss://localhost:8080' ;
	//demo.host =  'ws://localhost:8080/a/websocket/say';
	// 初始化按钮点击事件函数
	sendButton.onclick = function() {
		var message = textBox.value;
		if (!message) return;
		if (!demo.send(message)) return;
		textBox.value = '';
	};
	connButton.onclick = function() {
		if (!demo.socket) {
			demo.connect();
		}
			
		else console.log('websocket already exists .');
	};
	discButton.onclick = function() {
		if (demo.socket) demo.socket.close();
		else  console.log('websocket is not found .');
	};
</script>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>websocket demo</display-name>
    <servlet>
        <servlet-name>wsHello</servlet-name>
        <servlet-class>websocket.HelloWebSocketServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>wsHello</servlet-name>
        <url-pattern>/websocket/say</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

java

package websocket;

import java.util.concurrent.atomic.AtomicInteger;
import javax.servlet.http.HttpServletRequest;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;

public class HelloWebSocketServlet extends WebSocketServlet {
	private static final long serialVersionUID = 1L;

	private final AtomicInteger connectionIds = new AtomicInteger(0);
	@Override
	protected StreamInbound createWebSocketInbound(String arg0,
			HttpServletRequest request) {
		return new HelloMessageInbound(connectionIds.getAndIncrement(), request
				.getSession().getId());
	}
}

package websocket;

import java.io.IOException;
import java.io.InputStream;
import java.io.Reader;
import java.nio.CharBuffer;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WsOutbound;

public class HelloMessageInbound extends StreamInbound {

	private String WS_NAME;
	private final String FORMAT = "%s : %s";
	private final String PREFIX = "ws_";
	private String sessionId = "";

	public HelloMessageInbound(int id, String _sessionId) {
		this.WS_NAME = PREFIX + id;
		this.sessionId = _sessionId;
	}

	@Override
	protected void onTextData(Reader reader) throws IOException {
		char[] chArr = new char[1024];
		int len = reader.read(chArr);
		send(String.copyValueOf(chArr, 0, len));
	}

	@Override
	protected void onClose(int status) {
		System.out.println(String.format(FORMAT, WS_NAME, "closing ......"));
		super.onClose(status);
	}

	@Override
	protected void onOpen(WsOutbound outbound) {
		super.onOpen(outbound);
		try {
			send("hello, my name is " + WS_NAME);
			send("session id = " + this.sessionId);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	private void send(String message) throws IOException {
		message = String.format(FORMAT, WS_NAME, message);
		System.out.println(message);
		getWsOutbound().writeTextMessage(CharBuffer.wrap(message));
	}

	@Override
	protected void onBinaryData(InputStream arg0) throws IOException {
	}
}