基于spring4 websocket的簡易聊天室

jopen 9年前發布 | 83K 次閱讀 WebSocket 開發 Spring4

一：創建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>

二：編寫server endpoint

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=用戶名

多開幾個瀏覽器窗口，即可群聊

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1436321663442.html

WebSocket 開發 Spring4

基于spring4 websocket的簡易聊天室

相關經驗

相關資訊

相關文檔

目錄