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

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

在上一篇文章中介绍了协议握手，这篇文章将通过实现简单的群聊来帮助进一步了解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 { //将客户端传来的消息发送给所有在线用户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{@Overridepublic void modifyHandshake(ServerEndpointConfig config,HandshakeRequest request,HandshakeResponse response){HttpSession httpSession = (HttpSession)request.getHttpSession();config.getUserProperties().put(HttpSession.class.getName(),httpSession);}
}

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

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

客户端:

<!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)};/* 当客户端收到服务端发来的消息时，会触发onmessage事件，参数evt.data中包含server传输过来的数据 */webSocket.onmessage = function(event) {onMessage(event)};/* 当客户端收到服务端发送的关闭连接的请求时，触发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="发送" οnclick="send()"></body>
</html>

转载于:https://www.cnblogs.com/dingxiaoyue/p/4931740.html

websocket(二)--简单实现网页版群聊相关推荐

springboot+websocket构建在线聊天室（群聊+单聊）
系列导读: 1.springboot+websocket构建在线聊天室(群聊+单聊) 2.Spring Boot WebSocket:单聊(实现思路) 3.Websocket Stomp+Rabbit ...
如何做一个简单的网页版地图
前言以前做了一个安卓版的地图应用,现在突然想做一个简单的网页版地图.这个简单的网页版地图能根据城市名进行位置查询(有个城市列表的小控件,支持城市列表选择),还能根据经纬度进行位置查询.当你进行城市搜 ...
selectors简陋版群聊
selectors简陋版群聊 s = selectors.DefaultSelector()sock = socket.socket() sock.bind(('127.0.0.1', 9999)) ...
php编网页版计算器,php编程实现简单的网页版计算器功能示例
本文实例讲述了php编程实现简单的网页版计算器功能.分享给大家供大家参考,具体如下: 如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础知识来做的网页版计算器,功能只有&qu ...
php编网页版计算器,php实现简单的网页版计算器功能的方法
这篇文章主要介绍了php编程实现简单的网页版计算器功能,涉及php简单表单操作与数值运算相关实现技巧,需要的朋友可以参考下如何通过php代码来实现一个网页版的计算器的简单功能?下面就是通过php基础 ...
Netty学习笔记：二、NIO网络应用实例-群聊系统
实例要求: 编写一个NIO群聊系统,实现服务器端和多个客户端之间的数据简单通讯(非阻塞): 实现多人群聊: 服务器端:可以监测用户上线.离线,并实现消息转发功能: 客户端:通过channel可以无阻塞 ...
Qt 简易版群聊器小功能
1. 群成员界面设计: 在 signin.cpp 中的构造函数中创建按钮 // 1. 设置窗口名字.图标this->setWindowTitle("QQ群聊器");thi ...
JSP简单实现仿QQ群聊
先来了解一下JSP四大作用域吧! page里的变量没法从index.jsp传递到test.jsp.只要页面跳转了,它们就不见了. request里的变量可以跨越forward前后的两页.但是只要刷新页 ...
花了20分钟，给女朋友们写了一个web版群聊程序
WebSocket详解 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动 ...

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

websocket(二)--简单实现网页版群聊相关推荐

最新文章

热门文章