您的位置：首页 > Web前端 > HTML5

WebScoket通信简单小例子

2016-07-28 17:30 477 查看

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。

下面简单小例子实现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登录