基于html5websocket java实现简单通讯(虽然通了但是...你懂得)

最新推荐文章于 2025-08-01 14:27:03 发布

原创最新推荐文章于 2025-08-01 14:27:03 发布 · 6.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#websocket #java #html5 #通讯

java 同时被 2 个专栏收录

8 篇文章

订阅专栏

html5 socket

1 篇文章

订阅专栏

本文介绍了一个基于HTML5 WebSocket实现单播通信的实例。通过将用户ID作为唯一标识符传递给服务端，并使用Map数据结构存储用户ID与连接的关系，实现了根据用户ID精确发送消息的功能。

很早就想写一下基于Html5 websocket通讯的但是一直没有下手,今天心血来潮试了一下,原来以为是html5 socket的所以直接用以前自己弄得socket java服务来当服务端,百度了别人的html前台的,结果不行...只好认怂,把别人的服务端代码也拷下来试下,结果一看原来是websocket...跟socket两种性质。

然后试了下，通是通了，但是他的只能群发,我想要单播的,想了一下，想出了一个很笨很笨的方法,在连接的时候把用户的Id作为唯一标识传给服务端,服务端存储,然后根据用户要发送的对象的id进行比对,相同就发送.恩...效果是实现了.

恩，挺开心...突然瞥到关闭那边,只是把连接移除,没有把用户移除,加上...测通

以下代码参考 http://blog.youkuaiyun.com/huangwuyi/article/details/12912283 要加两个包catalina.jar、tomcat-coyote.jar

如果报错Java.lang.NoSuchMethodException: org.apache.catalina.deploy.WebXml addFilter 在Tomacat7的context.xml文件里的<Context>中加上<Loader delegate="true" />

前台页面:

<html> 
    <head> 
        <title>WebSoket Demo</title> 
        <script type="text/JavaScript"> 
            //验证浏览器是否支持WebSocket协议
            if (!window.WebSocket) { 
                alert("WebSocket not supported by this browser!"); 
            } 
             var ws;
            function display() { 
                //var valueLabel = document.getElementById("valueLabel"); 
                //valueLabel.innerHTML = ""; 
                ws=new WebSocket("ws://localhost:8080/Socket/websocket"); 
                //监听消息
                ws.onmessage = function(event) { 
                    //valueLabel.innerHTML+ = event.data; 
                    log(event.data);
                }; 
                // 打开WebSocket 
                ws.onclose = function(event) { 
                  //WebSocket Status:: Socket Closed
                }; 
                // 打开WebSocket
                ws.onopen = function(event) { 
                   //WebSocket Status:: Socket Open
                    //// 发送一个初始化消息
                    ws.send("Hello, Server!"+"%%%4"); //连接websocket 传递userId
                }; 
                ws.onerror =function(event){
                    //WebSocket Status:: Error was reported
                };
            } 
            var log = function(s) {  
   if (document.readyState !== "complete") {  
       log.buffer.push(s);  
   } else {  
       document.getElementById("contentId").innerHTML += (s + "\n");  
   }  
}  
            function sendMsg(){
                var msg=document.getElementById("messageId");
                //alert(msg.value);
                ws.send(msg.value); 
            }
        </script> 
    </head> 
    <body onload="display();"> 
        <div id="valueLabel"></div> 
        <textarea rows="20" cols="30" id="contentId"></textarea>
        <br/>
        <input name="message" id="messageId"/>
        <button id="sendButton" onClick="javascript:sendMsg()" >Send</button>
    </body> 
</html>

发送信息的时候带上id根据特定的格式拼凑,服务端拆分.

服务端:

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></display-name>
	<servlet>
		<servlet-name>initServlet</servlet-name>
		<servlet-class>com.InitServlet</servlet-class>
		<load-on-startup>1</load-on-startup>
	</servlet>
	<servlet>
		<servlet-name>websocket</servlet-name>
		<servlet-class>com.TestWebSocketServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>websocket</servlet-name>
		<url-pattern>/websocket</url-pattern>
	</servlet-mapping>
</web-app>

InitServlet

package com;

import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;

import org.apache.catalina.websocket.MessageInbound;

public class InitServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;
	private static List<MessageInbound> socketList;

	public void init(ServletConfig config) throws ServletException {
		InitServlet.socketList = new ArrayList<MessageInbound>();
		super.init(config);
		System.out.println("Server start============");
	}

	public static List<MessageInbound> getSocketList() {
		return InitServlet.socketList;
	}

}

TestWebSocketServlet

package com;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.List;

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;

public class TestWebSocketServlet extends WebSocketServlet {

	/**
* 
*/
	private static final long serialVersionUID = 1L;
	// 存储链接的容器
	private static List<WebSocketMessageInbound> connsList = new ArrayList<WebSocketMessageInbound>();

	// 存储用户信息
	private static List<String> userIds = new ArrayList<String>();

	@Override
	protected StreamInbound createWebSocketInbound(String subProtocol, HttpServletRequest request) {
		// TODO Auto-generated method stub
		return new WebSocketMessageInbound();
	}

	public class WebSocketMessageInbound extends MessageInbound {

		@Override
		protected void onClose(int status) {
			// InitServlet.getSocketList().remove(this);
			super.onClose(status);
			System.out.println("onClose");
			int i=0;
			//比对连接,删除用户唯一标识
			for(MessageInbound messageInbound : InitServlet.getSocketList()){
				if(this.equals(messageInbound)){
					userIds.remove(i);
					break;
				}
				i++;
				
			}
			InitServlet.getSocketList().remove(this);
		}

		@Override
		protected void onOpen(WsOutbound outbound) {
			System.out.println("onOpen");
			super.onOpen(outbound);
			InitServlet.getSocketList().add(this);
		}

		@Override
		protected void onBinaryMessage(ByteBuffer message) throws IOException {
			// TODO Auto-generated method stub
			System.out.println("onBinaryMessage");
		}

		@Override
		protected void onTextMessage(CharBuffer message) throws IOException {
			// TODO Auto-generated method stub
			System.out.println("onTextMessage=" + message);
			//获取用户id
			if (message.toString().indexOf("Hello, Server") > -1) {
				String idString = message.toString().split("%%%")[1];
				userIds.add(idString);
			}
			// this.getWsOutbound().writeTextMessage(CharBuffer.wrap("===="));
			// this.getWsOutbound().writeTextMessage(message);
			// 发送给所有链接的
			// for (MessageInbound messageInbound : InitServlet.getSocketList())
			// {
			// CharBuffer buffer = CharBuffer.wrap(message);
			// WsOutbound outbound = messageInbound.getWsOutbound();
			// outbound.writeTextMessage(buffer);
			// outbound.flush();
			// }
			int i = 0;
			if (message.toString().indexOf("Hello, Server") <0)
				for (String item : userIds) {
					//根据用户传来id比对,确定发送目标
					String str = message.toString().split("id")[1];
					if (item.equals(str)) {
						CharBuffer buffer = CharBuffer.wrap(message);
						WsOutbound outbound = InitServlet.getSocketList().get(i).getWsOutbound();
						outbound.writeTextMessage(buffer);
						outbound.flush();
					}
					i++;
				}
		}
	}
}

改一下存储数据的结构,用list太麻烦,还是用map直接根据用户id作为key,链接作为value,发送的时候直接根据key获取

Test

package com;

import java.io.IOException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;

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;

public class Test extends WebSocketServlet {

	/**
* 
*/
	private static final long serialVersionUID = 1L;

	
	//存储用户和链接
	private static Map<String, MessageInbound> maps = new ConcurrentHashMap<String, MessageInbound>();

	@Override
	protected StreamInbound createWebSocketInbound(String subProtocol, HttpServletRequest request) {
		// TODO Auto-generated method stub
		return new WebSocketMessageInbound();
	}

	public class WebSocketMessageInbound extends MessageInbound {

		@Override
		protected void onClose(int status) {
			// InitServlet.getSocketList().remove(this);
			super.onClose(status);
			System.out.println("onClose");
		}

		@Override
		protected void onOpen(WsOutbound outbound) {
			System.out.println("onOpen");
			super.onOpen(outbound);
			InitServlet.getSocketList().add(this);
		}

		@Override
		protected void onBinaryMessage(ByteBuffer message) throws IOException {
			// TODO Auto-generated method stub
			System.out.println("onBinaryMessage");
		}

		@Override
		protected void onTextMessage(CharBuffer message) throws IOException {
			// TODO Auto-generated method stub
			System.out.println("onTextMessage=" + message);
			// 获取用户id
			if (message.toString().indexOf("Hello, Server") > -1) {
				String idString = message.toString().split("%%%")[1];
				maps.put(idString, InitServlet.getSocketList().get(0));
				InitServlet.getSocketList().remove(0);
			}
			if (message.toString().indexOf("Hello, Server") < 0) {
				//根据用户id作为key获取链接
				String str = message.toString().split("id")[1];
				CharBuffer buffer = CharBuffer.wrap(message);
				if (maps.get(str) != null) {
					WsOutbound outbound = maps.get(str).getWsOutbound();
					outbound.writeTextMessage(buffer);
					outbound.flush();
				}
			}
		}
	}
}