websocket(二)--简单实现网页版群聊

websocket能够实现服务端的消息推送。而不必在client轮询。大大的节省的资源，对于实时通讯来说简直是个大喜讯。

在上一篇文章中介绍了协议握手，这篇文章将通过实现简单的群聊来帮助进一步了解websocket。

注意：1.JavaEE版本号为7.0

2.tomcat版本号为8.0

3.不须要额外导入其它的jar包

因为websocket不支持低版本号的javaEE和tomcat，所以必须符合上述条件。我是在Myeclipse2014 的IDE中进行编码的。

为了尽可能的使代码简洁以便更好的理解，所以代码中有些地方可能不全面，但不影响学习websocket。

首先是WebSocketServer类：

package socket;

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

import javax.servlet.http.HttpSession;
import javax.websocket.EndpointConfig;
import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint(value = "/socket",configurator=GetHttpSessionConfigurator.class)  
public class WebSocketServer {
	
	private static final Set<WebSocketServer> onlineUsers =
            new CopyOnWriteArraySet<WebSocketServer>();  //静态变量 存储在线用户
	private HttpSession httpSession;
	private Session session;
	private String name;
	
	@OnMessage  
    public void onMessage(String message, Session session)   
        throws IOException, InterruptedException { 
	
		//将client传来的消息发送给全部在线用户
		sendMessageToAllOnline(session,this.name+" : "+message);
		
		//在控制台打印当前在线用户
		for(WebSocketServer webSocketServer:onlineUsers){
        	System.out.print(webSocketServer.name+"  ");
        }
        System.out.println();
    }  
      
    @OnOpen  
    public void onOpen (Session session, EndpointConfig config) throws IOException {  
        System.out.println("Client connected");  
        
        this.session = session;
        this.httpSession = (HttpSession) config.getUserProperties()
                .get(HttpSession.class.getName());
        this.name=(String) httpSession.getAttribute("name");
        onlineUsers.add(this);   //将用户信息加入到在线用户序列中
        
        //将上线消息发送给全部在线用户
        sendMessageToAllOnline(session,this.name+" 上线了");
        
    }  
  
    @OnClose  
    public void onClose(Session session) throws IOException{  
    	onlineUsers.remove(this);
        System.out.println("Connection closed"); 
        //将下线消息发送给全部在线用户
        sendMessageToAllOnline(session,this.name+" 下线了");
        
    }  
   /**
    * 发送信息给全部在线用户.
    * @param session
    * @param message
    */
   public void sendMessageToAllOnline(Session session,String message) throws IOException{
	   for (Session sess : session.getOpenSessions()){
	  		  if (sess.isOpen()){
	  			  sess.getBasicRemote().sendText(message);			  
	  		  }
	   }
   }
}

因为这里边的session和平时使用的httpsession不是同一个，所以为了能够获取httpsession以便获取当前用户的信息，所以须要以下的类：

package socket;

import javax.servlet.http.HttpSession;
import javax.websocket.HandshakeResponse;
import javax.websocket.server.HandshakeRequest;
import javax.websocket.server.ServerEndpointConfig;
/**
 * 为获取httpSession提供支持
 * @author nagsh
 *
 */
public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator{
	@Override
    public void modifyHandshake(ServerEndpointConfig config,
                                HandshakeRequest request,
                                HandshakeResponse response){
        HttpSession httpSession = (HttpSession)request.getHttpSession();
        config.getUserProperties().put(HttpSession.class.getName(),httpSession);
    }
}

该类在websocket的@ServerEndpoint注解中引用。

为了能够获取登陆用户的信息以便实现群聊，简单的写了一个登陆，会将用户信息存到session中

client:

<!DOCTYPE html>
<html>
  <head>
    <title>login.html</title>
  </head>
  
  <body>
    <form action="servlet/LoginServlet" method="post">
               姓名:<input type="text" name="name"/>
       <input type="submit">
    </form>
  </body>
</html>

服务端：

package socket;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 处理用户的登陆.
 * @author nagsh
 *
 */
public class LoginServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		
		String name = request.getParameter("name");
		//将当前用户的信息存入session中
		request.getSession().setAttribute("name",name);
		//重定向到聊天界面
		response.sendRedirect("/websockettest/socketClient.jsp");
	}

}

然后以下是简单的聊天界面(勿吐槽哈) 该页面是在上篇文章实现握手的页面基础上简单改动的：

socketClient.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE html>
<html>
<head>
<title>Testing websockets</title>
 <script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<script type="text/javascript">
	    /*   申请一个WebSocket对象，參数是须要连接的服务器端的地址 */
		var webSocket =  new WebSocket('ws://localhost:8080/websockettest/socket');

        /* 假设出现连接、处理、接收、发送数据失败的时候就会触发onerror事件 */
		webSocket.onerror = function(event) {
			onError(event)
		};
		
       /* 当websocket创建成功时，即会触发onopen事件 */
		webSocket.onopen = function(event) {
			onOpen(event)
		};
		
        /* 当client收到服务端发来的消息时，会触发onmessage事件，參数evt.data中包括server传输过来的数据 */
		webSocket.onmessage = function(event) {
			onMessage(event)
		};
		
        /* 当client收到服务端发送的关闭连接的请求时，触发onclose事件 */
        webSocket.onclose = function(event) {
			onMessage(event)
		};

		function onMessage(event) {
		   $("#messages").append(event.data+"<br/>");
		}

		function onOpen(event) {
		    $("#messages").append("成功建立连接...<br/>");
		    $("#messages").append(event.data);
			
		}

        function onClose(event) {
			$("#messages").append(event.data);
		}

		function onError(event) {
			alert("error");
		}
		
        //发送信息
        function send(){
            var content = $("#content").val();
            webSocket.send(content);      
        }
	</script>
<body>
	
	<div id="messages"></div>
	<input type="text" id="content">
	<input type="button" value="发送" onclick="send()">
	
</body>
</html>

posted @ 2017-06-01 15:02 yjbjingcha 阅读(262) 评论(0) 收藏举报

刷新页面返回顶部

websocket(二)--简单实现网页版群聊

公告