一:创建maven webapp项目
编辑pom.xml文件
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.lala</groupId>
<artifactId>tweet</artifactId>
<version>1.0.0</version>
<packaging>war</packaging>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<jsp.version>2.2</jsp.version>
<jstl.version>1.2</jstl.version>
<servlet.version>3.0.1</servlet.version>
<spring-framework.version>4.1.7.RELEASE</spring-framework.version>
<junit.version>4.12</junit.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring-framework.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>${jstl.version}</version>
</dependency>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>${servlet.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>${jsp.version}</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>${junit.version}</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-websocket</artifactId>
<version>${spring-framework.version}</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.3.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.3</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<verbose>true</verbose>
</configuration>
</plugin>
<plugin>
<groupId>org.eclipse.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<version>9.2.11.v20150529</version>
<configuration>
<stopKey>foo</stopKey>
<stopPort>9999</stopPort>
<httpConnector>
<port>9090</port>
</httpConnector>
<webApp>
<contextPath>/</contextPath>
</webApp>
</configuration>
</plugin>
</plugins>
</build>
</project>
package com.lala.action;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import com.google.gson.Gson;
public class TweetWebSocket extends TextWebSocketHandler
{
private Map<String, WebSocketSession> clients = new ConcurrentHashMap<>();
public void handleTextMessage(WebSocketSession session, TextMessage message)
{
if(!clients.containsKey(session.getId()))
{
clients.put(session.getId(), session);
}
String data = message.getPayload();
Gson g = new Gson();
Map<String, Object> datas = g.fromJson(data, Map.class);
String type = datas.get("type").toString();
if("1".equals(type))
{
datas.put("pcount", clients.keySet().size() + "");
}
else if("3".equals(type))
{
clients.remove(session.getId());
datas.put("pcount", clients.keySet().size() + "");
}
TextMessage tm = new TextMessage(g.toJson(datas));
sendToAll(tm);
}
private void sendToAll(TextMessage tm)
{
try
{
for(WebSocketSession session : clients.values())
{
if(session.isOpen())
{
session.sendMessage(tm);
}
else
{
clients.remove(session.getId());
}
}
}catch(Exception e)
{
e.printStackTrace();
}
}
}
三:mvn-servlet配置
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:websocket="http://www.springframework.org/schema/websocket"
xsi:schemaLocation="http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/websocket
http://www.springframework.org/schema/websocket/spring-websocket.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context.xsd">
<mvc:annotation-driven />
<context:component-scan base-package="com.lala"></context:component-scan>
<bean id="tweet" class="com.lala.action.TweetWebSocket"/>
<websocket:handlers>
<websocket:mapping path="/tweets/list" handler="tweet"/>
</websocket:handlers>
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/"/>
<property name="suffix" value=".jsp"/>
</bean>
</beans>
index.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>动弹列表</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
.jz {
margin: 0 auto;
text-align: center;
}
.tw {
border:1px dotted red;
height: 60px;
width:600px;
margin:0px auto;
padding-left:10px;
padding-top:10px;
margin-top:5px;
}
.top {
}
.buttom {
padding-top:10px;
}
#send-box {
margin-top:10px;
}
</style>
</head>
<body>
<div class="jz" style="font-size:30px;">动弹列表</div>
<div class="jz" style="font-size:20px;">欢迎回来:${param.username},当前在线人数<b id="pcount"></b></div>
<div class="jz" id="err-box"></div>
<div id="msg-box">
<div class="tw">
<div class="top">admin 2015-07-05</div>
<div class="buttom">请大家随意畅谈</div>
</div>
</div>
<div id="send-box" class="jz">
<input type="text" id="text-msg" style="width:300px;"/>
<input type="button" οnclick="send_msg()" value="发布动弹"/>
</div>
<script type="text/javascript">
var username = '${param.username}';
var ws = new WebSocket('ws://127.0.0.1:9090/tweets/list');
ws.onerror = function(event)
{
$('#err-box').html(event);
};
ws.onopen = function(event)
{
start() ;
};
ws.onclose = function(event) {
var msg = JSON.stringify({'username':username, 'type':'3'});
ws.send(msg);
};
ws.onmessage = function(event)
{
var data = JSON.parse(event.data);
if(data.type == '2')
{
render_data(data.username, data.data);
}
else if(data.type == '1')
{
$('#pcount').html(data.pcount);
render_data('<span style="color:red;">系统信息</span>', data.username + "加入系统");
}
};
function render_data(username, data)
{
var msg = [];
msg.push('<div class="tw">');
msg.push('<div class="top">' + username + ' 2015-07-05</div>');
msg.push('<div class="buttom"> ' + data + ' </div>');
msg.push('</div>');
$('#msg-box').append(msg.join(''));
}
function start()
{
if(username != '')
{
var msg = JSON.stringify({'username':username, 'type':'1'});
ws.send(msg);
}
}
function send_msg()
{
var text_msg = $('#text-msg').val();
if(text_msg != '')
{
var msg = JSON.stringify({'username':username, 'type':'2', 'data': text_msg});
ws.send(msg);
$('#text-msg').val('');
}
}
(function(){
if(username == '')
{
alert('用户名为空,无法发布动弹');
$('#send-box').hide();
}
})();
</script>
</body>
</html>
最后,执行
mvn clean jetty:run
启动服务
在浏览器上面输入
http://127.0.0.1:9090/index.jsp?username=用户名
多开几个浏览器窗口,即可群聊
效果图为: