WebScoket通信简单小例子
2016-07-28 17:30
483 查看
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。
下面简单小例子实现WebSocket通信
1、编写实体类Content.java
2、编写实体类Message.java
3、写一个login.jsp
4、登录验证跳转
5、写一个聊天页面chat.jsp
6、写ChatSocket.java
7、编写WebSocketConfig.java
输入用户名aaaa登录
aaaa进入聊天室
新建页面输入用户名bbbb登录
bbbb进入聊天室
使用bbbb用户发送信息 This is b
发送之后aaaa这边并没有显示
bbbb会收到消息,红字显示
下面简单小例子实现WebSocket通信
1、编写实体类Content.java
/** * @author XJ * 实体类 */ public class Content { //单聊时 信息发送的目标 private String chatToWho; //聊天内容 private String msg; //聊天类型(群聊或者单聊) private Integer type; public String getChatToWho() { return chatToWho; } public void setChatToWho(String chatToWho) { this.chatToWho = chatToWho; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public Integer getType() { return type; } public void setType(Integer type) { this.type = type; }
2、编写实体类Message.java
import java.util.Date; import java.util.List; import com.google.gson.Gson; /** * @author XJ * 信息实体类 */ public class Message { //第一句欢迎语 private String welcome; //进入聊天室的用户列表 private List<String> usernames; //聊天内容(发送者,发送时间,内容) private String content; public String getContent() { return content; } public void setContent(String content) { this.content = content; } public void setContent(String name,String msg) { this.content = name +" "+new Date().toLocaleString()+"<br/>"+msg+"<br/>"; } public String getWelcome() { return welcome; } public void setWelcome(String welcome) { this.welcome = welcome; } public List<String> getUsernames() { return usernames; } public void setUsernames(List<String> usernames) { this.usernames = usernames; } //创建Gson对象 private static Gson gson = new Gson(); //将java对象转成json串 public String toJson(){ String json = gson.toJson(this); return json; }
3、写一个login.jsp
<form action="<%=request.getContextPath() %>/LoginServlet" method="post"> 用户名:<input type="text" name="username"> <input type="submit" value="登录"> </form>
4、登录验证跳转
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * @author XJ * 登录页面 */ @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet { protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ //前台获取登录名 String username = request.getParameter("username"); //将登录名放入session中 request.getSession().setAttribute("username", username); //跳转到聊天页面 response.sendRedirect("chat.jsp"); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{ doGet(request, response); } }
5、写一个聊天页面chat.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="<%=request.getContextPath()%>/jquery/jquery.min.js"></script> <script type="text/javascript"> //获取用户名 var username = "${sessionScope.username}"; //一个ws对象就是一个通信管道 var ws; //服务器端EndPoint的URL var target="ws://localhost:8080/myWebSocket/chatSocket?username="+username; window.onload=function(){ //进入聊天页面,就打开socket通道 // 判断浏览器是IE还是火狐 if ('WebSocket' in window) { ws = new WebSocket(target); } else if ('MozWebSocket' in window) { ws = new MozWebSocket(target); } else { alert('WebSocket is not supported by this browser.'); return; } ws.onmessage=function(event){ console.info(event.data) //将gson转成字符串 eval("var msg="+event.data+";"); //进入聊天室的欢迎语 if(undefined!=msg.welcome){ $("#content").append(msg.welcome) } //用户列表 if(undefined!=msg.usernames){ $("#userList").html(""); $(msg.usernames).each(function(){ $("#userList").append("<input type='checkbox' value='"+this+"'>"+this+"<br/>") }) } //服务端 发送到客户端的内容 if(undefined!=msg.content){ $("#content").append(msg.content) } } } //发送方法 function subSend(){ var ss = $("#userList :checked"); var msg = $("#msg").val(); var obj = null; if(ss.size()==0){ obj={ msg:msg, type:1 //1 广播 2 单聊 } }else{ var chatToWho = $("#userList :checked").val(); obj={ chatToWho:chatToWho, msg:msg, type:2 //1 广播 2 单聊 } } //将js对象转成json串 var str = JSON.stringify(obj); ws.send(str); $("#msg").val(""); } //退出方法 function exit(){ location.href="<%=request.getContextPath()%>/login.jsp"; } </script> </head> <body> <div id="container" style="border:1px solid black; width:400px; height:400px; float:left;"> <div id="content" style="height:350px;"></div> <div style="border-top:1px solid black; width:400px; height:50px;"> <input id="msg"/><button onclick="subSend();">发送</button> <button onclick="exit();">退出</button> </div> </div> <div id="userList" style="border:1px solid black; width:100px; height:400px; float:left;"></div> </body> </html>
6、写ChatSocket.java
import java.io.IOException; import java.io.UnsupportedEncodingException; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import javax.websocket.OnClose; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; import com.google.gson.Gson; import com.ws.bean.Content; import com.ws.bean.Message; /** * @author XJ * 聊天室 */ @ServerEndpoint("/chatSocket") public class ChatSocket { //用户名 private String username; //session集合 private static List<Session> sessions = new ArrayList<>(); //用户列表集合 private static List<String> names = new ArrayList<String>(); //用户名与session的Map private static Map<String,Session> map = new HashMap<String,Session>(); /** * @author XJ * 进入聊天室 */ @OnOpen public void open(Session session) throws UnsupportedEncodingException{ //当前websocket的session对象,不是servlet的session,这里的一个session代表一个通信会话! String queryString = session.getQueryString(); //获取当前登录的用户名 username = queryString.split("=")[1]; //将用户名放入用户列表集合 this.names.add(username); //将当前session放入session集合 this.sessions.add(session); //将用户名和对应session放入map中 map.put(username, session); //进入聊天室欢迎语 String msg = "欢迎"+this.username+"进入聊天室!!<br/>"; System.out.println("msg----------"+msg); //创建message对象 Message message = new Message(); message.setWelcome(msg); message.setUsernames(this.names); //广播 this.broadcast(sessions, message.toJson()); } //创建Gson对象 private static Gson gson = new Gson(); /** * @author XJ * 进行聊天 */ @OnMessage public void message(Session session,String json){ //将json串转成java对象 Content content = gson.fromJson(json, Content.class); if(content.getType()==1){ //广播 Message message = new Message(); message.setUsernames(this.names); message.setContent(this.username,content.getMsg()); broadcast(this.sessions,message.toJson()); }else{ //单聊 //根据username找到对应的session对象 String chatToWho = content.getChatToWho(); Session to_session = map.get(chatToWho); Message message = new Message(); message.setUsernames(this.names); message.setContent(this.username,"<font color='red'>"+content.getMsg()+"</font>"); System.out.println("message"+message.getContent()); //向目标发送信息 try { to_session.getBasicRemote().sendText(message.toJson()); } catch (IOException e) { e.printStackTrace(); } } } /** * @author XJ * 退出聊天室 */ @OnClose public void close(Session session){ //session集合清除当前用户 sessions.remove(session); //用户列表集合清除当前用户 names.remove(username); //退出聊天室提示语 String msg = username+"退出聊天室!!<br/>"; //创建message对象 Message message = b6fd new Message(); message.setWelcome(msg); message.setUsernames(this.names); //广播 broadcast(this.sessions,message.toJson()); } /** * @author XJ * 广播 */ public void broadcast(List<Session> ss,String msg){ //遍历session集合 for (Session session : ss) { try { //服务端向客户端发送消息 session.getBasicRemote().sendText(msg); } catch (IOException e) { e.printStackTrace(); } } } }
7、编写WebSocketConfig.java
import java.util.Set; import javax.websocket.Endpoint; import javax.websocket.server.ServerApplicationConfig; import javax.websocket.server.ServerEndpointConfig; /** * @author XJ * webSocket启动文件 */ public class WebSocketConfig implements ServerApplicationConfig{ //实现了ServerApplicationConfig接口后,在项目启动时,此类自动执行,这样随着Tomcat的启动来启动WebSocket //注解方式的启动 @Override public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> scan) { //输出被扫描到的带注解的类的个数 System.out.println("config....."+scan.size()); //返回被扫描到的所有带@ServerEndpoint注解的类 方便服务器端注册websocket server return scan; } //接口方式的启动 @Override public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) { return null; } }
输入用户名aaaa登录
aaaa进入聊天室
新建页面输入用户名bbbb登录
bbbb进入聊天室
群聊
使用aaaa用户发送信息 This is a使用bbbb用户发送信息 This is b
单聊
使用aaaa用户发送信息给bbbb,选中bbbb发送消息发送之后aaaa这边并没有显示
bbbb会收到消息,红字显示
相关文章推荐
- 2015-2016网页设计趋势分析 Web Design of Trends
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证(升级版)
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器:Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把,这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略,这里的坑你知多少?
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动,你应该知道的
- 数组reduce方法的高级技巧
- C#实现子窗体与父窗体通信方法实例总结