基于spring4 websocket的简易聊天室
jopen
9年前
一：创建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" onclick="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=用户名
多开几个浏览器窗口，即可群聊