websocket

最新推荐文章于 2023-08-25 13:49:22 发布

记得w

最新推荐文章于 2023-08-25 13:49:22 发布

阅读量407

点赞数

分类专栏： java

本文链接：https://blog.youkuaiyun.com/jidetashuo/article/details/54617897

版权

java 专栏收录该内容

10 篇文章

订阅专栏

通过查资料web通信一般两种方式 ajax轮询，websocket

tomcat 8 或以上

简单demo

java 代码

/**
 * @author WangMeng
 * @date 2017年1月18日
 */
package com.kuangren.websocket;

import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

/**
 * @author zhangsan
 * @date 2017年1月18日
 */

@ServerEndpoint("/mywebsocket")
public class MyWebSocket
{
	// 静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
	private static int onlineCount = 0;

	// concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话，可以使用Map来存放，其中Key可以为用户标识
	private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();

	// 与某个客户端的连接会话，需要通过它来给客户端发送数据
	private Session session;
	
	/**
	 * 连接建立成功调用的方法
	 * 
	 * @param session
	 *            可选的参数。session为与某个客户端的连接会话，需要通过它来给客户端发送数据
	 */
	@OnOpen
	public void onOpen(Session session)
	{
		this.session = session;
		webSocketSet.add(this); // 加入set中
		addOnlineCount(); // 在线数加1
		System.out.println("有新连接加入！当前在线人数为" + getOnlineCount());
	}

	/**
	 * 连接关闭调用的方法
	 */
	@OnClose
	public void onClose()
	{
		webSocketSet.remove(this); // 从set中删除
		subOnlineCount(); // 在线数减1
		System.out.println("有一连接关闭！当前在线人数为" + getOnlineCount());
	}

	/**
	 * 收到客户端消息后调用的方法
	 * 
	 * @param message
	 *            客户端发送过来的消息
	 * @param session
	 *            可选的参数
	 */
	@OnMessage
	public void onMessage(String message, Session session)
	{
		System.out.println("来自客户端的消息:" + message);

		System.out.println("这是一个");
		// 群发消息
		for (MyWebSocket item : webSocketSet)
		{
			try
			{
				item.sendMessage(message);
			}
			catch (IOException e)
			{
				e.printStackTrace();
				continue;
			}
		}
	}

	/**
	 * 发生错误时调用
	 * 
	 * @param session
	 * @param error
	 */
	@OnError
	public void onError(Session session, Throwable error)
	{
		System.out.println("发生错误");
		error.printStackTrace();
	}

	/**
	 * 这个方法与上面几个方法不一样。没有用注解，是根据自己需要添加的方法。
	 * 
	 * @param message
	 * @throws IOException
	 */
	public void sendMessage(String message) throws IOException
	{

		this.session.getBasicRemote().sendText(message);
		// this.session.getAsyncRemote().sendText(message);
	}

	public static synchronized int getOnlineCount()
	{
		return onlineCount;
	}

	public static synchronized void addOnlineCount()
	{
		MyWebSocket.onlineCount++;
	}

	public static synchronized void subOnlineCount()
	{
		MyWebSocket.onlineCount--;
	}
}

无需配置

html代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="shortcut icon" href="$!{confRoot}/img/logo.ico" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/lib/Hui-iconfont/1.0.7/iconfont.css" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/lib/icheck/icheck.css" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
	href="$!confRoot/static/h-ui.admin/css/style.css" />

<title>狂人</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body>
	Welcome
	<br />
	<input id="text" type="text" />
	<button οnclick="send()">Send</button>
	<button οnclick="actionSend()">通过action send</button>
	<button οnclick="closeWebSocket()">Close</button>
	<div id="message">
<script type="text/javascript" src="$!confRoot/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/layer/2.1/layer.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/icheck/jquery.icheck.min.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/jquery.validation/1.14.0/jquery.validate.min.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/jquery.validation/1.14.0/messages_zh.min.js"></script> 
<script type="text/javascript" src="$!confRoot/static/h-ui/js/H-ui.js"></script> 
<script type="text/javascript" src="$!confRoot/static/h-ui.admin/js/H-ui.admin.js"></script> 
<script type="text/javascript" src="$!confRoot/lib/My97DatePicker/WdatePicker.js"></script> 
<script type="text/javascript" src="$!confRoot/js/ext-api.js"></script>  
	<script type="text/javascript">
			var websocket = null;

			//判断当前浏览器是否支持WebSocket
			if ('WebSocket' in window) {
				websocket = new WebSocket(
						"ws://localhost:8080/kuangren-managerment/mywebsocket");
			} else {
				alert('Not support websocket')
			}

			//连接发生错误的回调方法
			websocket.onerror = function() {
				setMessageInnerHTML("error");
			};

			//连接成功建立的回调方法
			websocket.onopen = function(event) {
				alert("open");
				setMessageInnerHTML("open");
			}

			//接收到消息的回调方法
			websocket.onmessage = function(event) {
				alert(event.data);
				setMessageInnerHTML(event.data);
			}

			//连接关闭的回调方法
			websocket.onclose = function() {
				alert('close');
				setMessageInnerHTML("close");
			}

			//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
			window.onbeforeunload = function() {
				websocket.close();
			}

			//将消息显示在网页上
			function setMessageInnerHTML(innerHTML) {
				document.getElementById('message').innerHTML += innerHTML
						+ '<br/>';
			}

			//关闭连接
			function closeWebSocket() {
				
				websocket.close();
			}

			//发送消息
			function send() {
				var message = document.getElementById('text').value;
				websocket.send(message);
			}
			
			function actionSend(){
				
				var message = document.getElementById('text').value;
				var data={
						
						message:message
				}
				extApi.ajaxJson("sendMessage.action",data,function(data){
					
					
				})
			}
		</script>
</body>
</html>

实现了简单的通信，页面发送消息，后台接收，并可以广播

问题：怎么实现后台主动推送消息，还在研究中。。。。。