在之前的项目基础上，加入了一个聊天室的功能，为了界面好看 引入了AmazeUI和umeditor最终效果图如下:

源码在 https://github.com/Zering/MyWeb 目前练习都在这个上面做

如果导入maven项目出现 Cannot change version of project facet Dynamic Web Module to 3.0.之类的错误时，可以参考http://www.cnblogs.com/zhanghj405/p/5579627.html

进入正题

jsp页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport"

    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<title>We Chat</title>

<!-- Set render engine for  browser -->

<meta name="renderer" content="webkit">

<!-- No Baidu Siteapp-->

<meta http-equiv="Cache-Control" content="no-siteapp" />

<link rel="alternate icon" href="../assets/i/favicon.ico">

<link rel="stylesheet" href="../assets/css/amazeui.min.css">

<link rel="stylesheet" href="../assets/css/app.css">

<!-- umeditor css -->

<link href="../umeditor/themes/default/css/umeditor.css"

    rel="stylesheet">

<style>

.title {

    text-align: center;

}

.chat-content-container {

    height: 29rem;

    overflow-y: scroll;

    border: 1px solid silver;

}

</style>

</head>

<body>

    <!-- title start -->

    <div class="title">

        <div class="am-g am-g-fixed">

            <div class="am-u-sm-12">

                <h1 class="am-text-primary">We Chat</h1>

            </div>

        </div>

    </div>

    <!-- title end -->

    <!-- chat content start -->

    <div class="chat-content">

        <div class="am-g am-g-fixed chat-content-container">

            <div class="am-u-sm-12">

                <ul id="message-list" class="am-comments-list am-comments-list-flip"></ul>

            </div>

        </div>

    </div>

    <!-- chat content start -->

    <!-- message input start -->

    <div class="message-input am-margin-top">

        <div class="am-g am-g-fixed">

            <div class="am-u-sm-12">

                <form class="am-form">

                    <div class="am-form-group">

                        <script type="text/plain" id="myEditor"

                            style="width: 100%; height: 8rem;"></script>

                    </div>

                </form>

            </div>

        </div>

        <div class="am-g am-g-fixed am-margin-top">

            <div class="am-u-sm-6">

                <div id="message-input-nickname"

                    class="am-input-group am-input-group-primary">

                    <span class="am-input-group-label"><i class="am-icon-user"></i></span>

                    <input id="nickname" value="${username}" type="text"

                        class="am-form-field" disabled />

                </div>

            </div>

            <div class="am-u-sm-6">

                <button id="send" type="button" class="am-btn am-btn-primary">

                    <i class="am-icon-send"></i> Send

                </button>

            </div>

        </div>

    </div>

    <!-- message input end -->

    <!--[if (gte IE )|!(IE)]><!-->

    <script src="../assets/js/jquery.min.js"></script>

    <!--<![endif]-->

    <!--[if lte IE  ]>

  <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

  <![endif]-->

    <!-- umeditor js -->

    <script charset="utf-8" src="../umeditor/umeditor.config.js"></script>

    <script charset="utf-8" src="../umeditor/umeditor.min.js"></script>

    <script src="../umeditor/lang/zh-cn/zh-cn.js"></script>

    <script>

        $(function() {

            // 初始化消息输入框

            var um = UM.getEditor('myEditor');

            // 使昵称框获取焦点

            $('#nickname')[].focus();

            var socket = null;

            function parseObj(strData) {//转换对象

                return (new Function("return " + strData))();

            }

            ;

            //创建socket对象

            socket = new WebSocket("ws://" + window.location.host

                    + "/${pageContext.request.contextPath}/wechat");

            //连接创建后调用

            socket.onopen = function() {

                $("#message-list").append($('#nickname').val() + "进入聊天室<br/>");

            };

            //接收到服务器消息后调用

            socket.onmessage = function(message) {

                var message = parseObj(message.data);

                var messageItem = '<li class="am-comment '

                        + (message.isSelf ? 'am-comment-flip' : 'am-comment')

                        + '">'

                        + '<a href="javascript:void(0)" ><img src="../assets/images/'

                        + (message.isSelf ? 'self.png' : 'others.jpg')

                        + '" alt="" class="am-comment-avatar" width="48" height="48"/></a>'

                        + '<div class="am-comment-main"><header class="am-comment-hd"><div class="am-comment-meta">'

                        + '<a href="javascript:void(0)" class="am-comment-author">'

                        + message.nickname + '</a> <time>' + message.date

                        + '</time></div></header>'

                        + '<div class="am-comment-bd">' + message.content

                        + '</div></div></li>';

                $(messageItem).appendTo('#message-list');

                // 把滚动条滚动到底部

                $(".chat-content-container").scrollTop(

                        $(".chat-content-container")[].scrollHeight);

            };

            //关闭连接的时候调用

            socket.onclose = function() {

                $("#message-list").append($('#nickname').val() + "退出聊天室<br/>");

            };

            //出错时调用

            socket.onerror = function() {

                alert("error");

            };

            $("#send").click(function() {

                var nickname = $('#nickname').val();

                // 发送消息

                socket.send(JSON.stringify({

                    content : um.getContent(),

                    nickname : nickname

                }));

                // 清空消息输入框

                um.setContent('');

                // 消息输入框获取焦点

                um.focus();

            });

        });

    </script>

</body>

</html>

后台socket

package com.app.websocket;

import java.text.SimpleDateFormat;

import java.util.Date;

import java.util.Hashtable;

import java.util.Map;

import java.util.Set;

import java.util.logging.Logger;

import javax.websocket.CloseReason;

import javax.websocket.OnClose;

import javax.websocket.OnError;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

import com.alibaba.fastjson.JSON;

import net.sf.json.JSONObject;

//注意此访问地址格式如:"ws://"+ window.location.host+"/${pageContext.request.contextPath}/wechat"是ws开头的,而不是以http:开头的.

@ServerEndpoint(value = "/wechat")

public class Socket {

    private static final SimpleDateFormat DATE_FORMAT = new SimpleDateFormat("yyyy-MM-dd HH:mm");    // 日期格式化

    private Logger logger = Logger.getLogger(this.getClass().getName());

    static Map<String,Session> sessionMap = new Hashtable<String,Session>();

    @OnOpen

    public void onOpen(Session session) {

        sessionMap.put(session.getId(), session);

    }

//    @OnMessage

//    public void onMessage(String unscrambledWord, Session session) {

//        broadcastAll("message",unscrambledWord);

//    }

    @OnMessage

    public void getMessage(String message, Session session) {

        Set<Map.Entry<String,Session>> set = sessionMap.entrySet();

        // 把客户端的消息解析为JSON对象

        JSONObject jsonObject = JSONObject.fromObject(message);

        // 在消息中添加发送日期

        jsonObject.put("date", DATE_FORMAT.format(new Date()));

//        // 把消息发送给所有连接的会话

//        for (Session openSession : session.getOpenSessions()) {

//          // 添加本条消息是否为当前会话本身发的标志

//          jsonObject.put("isSelf", openSession.equals(session));

//          // 发送JSON格式的消息

//          openSession.getAsyncRemote().sendText(jsonObject.toString());

//        }

        for(Map.Entry<String,Session> i: set){

            try {

                jsonObject.put("isSelf", i.getValue().equals(session));

                i.getValue().getBasicRemote().sendText(JSON.toJSONString(jsonObject));

            } catch (Exception e) {

                e.printStackTrace();

            }

        }

      }

//    /**

//     * 广播给所有人

//     * @param message

//     */

//    public static void broadcastAll(String type,String message){

//        Set<Map.Entry<String,Session>> set = sessionMap.entrySet();

//        for(Map.Entry<String,Session> i: set){

//            try {

//                i.getValue().getBasicRemote().sendText("{type:'"+type+"',text:'"+message+"'}");

//            } catch (Exception e) {

//                e.printStackTrace();

//            }

//        }

//    }

    @OnClose

    public void onClose(Session session, CloseReason closeReason) {

        sessionMap.remove(session.getId());

        logger.info(String.format("Session %s closed because of %s", session.getId(), closeReason));

    }

    @OnError

    public void error(Session session, java.lang.Throwable throwable){

        sessionMap.remove(session.getId());

        System.err.println("session "+session.getId()+" error:"+throwable);

    }

}

@onmessage里面的改写是为了配合umeditor里面 可以发表情，图片，文件等一系列功能

javaweb学习路之三--websocket多人在线聊天的更多相关文章

  1. 基于JQuery+JSP的无数据库无刷新多人在线聊天室

    JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...

  2. Spring Websocket实现简易在线聊天功能

    针对Spring Websocket的实现,我参照了其他博主的文章https://www.cnblogs.com/leechenxiang/p/5306372.html 下面直接给出实现: 一.引入相 ...

  3. 一个Java编写的小玩意儿---多人在线聊天工具

    这个在线聊天工具小项目使用JAVA编写,用JAVA来做图形界面本来就是出了名的低效和丑陋.不过这不是重点.写这个小项目的目的在于串一串J2SE的知识,把当时写这个项目的时候的思路梳理一下.时间有点久了 ...

  4. javaweb学习路之四--cxf发布Webservice

    背景:maven构建的springMvc+mybatis框架 源码--->https://github.com/Zering/MyWeb 步骤:(本步骤是自己在实际探索过程中的步骤,我的思路是先 ...

  5. javaweb学习路之二--上传gitgub

    代码上传github 代码上传到github的步骤 第一步:申请github账号 https://github.com/注册账号 第二步:登录github,新建repository仓库,命名,创建 第 ...

  6. javaweb学习路之一--web项目搭建

    概述: 工作闲暇时间想要自己搭建一个web项目玩玩,没想到大半天才弄了一个springMVC+mybatis的网站,简直菜的不行,以下记录所有的步骤加深印象 使用环境 1.jdk1.8 2.maven ...

  7. websocket简单实现在线聊天

    WebSocket简介与消息推送 B/S架构的系统多使用HTTP协议,HTTP协议的特点: 1 无状态协议2 用于通过 Internet 发送请求消息和响应消息3 使用端口接收和发送消息,默认为80端 ...

  8. 用NodeJS打造多人在线聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）

    项目背景 这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...

  9. php使用swoole实现一个简单的多人在线聊天群发

    聊天逻辑的好多细节没有实现,只实现群发. php代码: $serv = new swoole_websocket_server("127.0.0.1",3999); //服务的基本 ...

随机推荐

  1. perl正则表达式第二周笔记

    1.使用正则表达式修改文本 1.使用正则表达式修改文本 正则表达式的功能不只有查询,还可以对文本进行修改,例如替换 $var=~m/regex/i $var=~s/regex/replacement/ ...

  2. OC中没有实现NSCopying技术时的深复制技术

    最近看书看到一种新的实现深复制对象的技术,使用Foundation的归档技术,下面是代码: NSData *data = [NSKeyedArchiver archivedDataWithRootOb ...

  3. ExtJS 修改load paging时的参数

    ExtJS 的pagingToolbar 在翻页的时候传入的参数是固定的  分别是start 和 limit(其中limit的值就是store.pageSize的值) 如何在每次翻页的时候传入自己的参 ...

  4. Oracle 11g RAC database on ASM, ACFS or OCFS2

    I see a lot of questions on shared file systems that can be used when people move from single instan ...

  5. 字符串的MD5的32位加密和16位加密

    import java.security.MessageDigest; import java.util.Locale; public class MD5Util { public static St ...

  6. 视频主观质量评价工具：MSU Perceptual Video Quality tool

    MSU Perceptual Video Quality tool是莫斯科国立大学(Moscow State University)的Graphics and Media Lab制作的一款视频主观评价 ...

  7. 去掉android的屏幕上的title bar

    在配置文件里修改 (关键代码:android:theme="@android:style/Theme.NoTitleBar.Fullscreen",如果想只是去除标题栏就后面不用加 ...

  8. H5 应用程序返回button的js代码设计，设计仿stack

    history.back(); 该代码具有天然的缺陷,二手知道,于H5应用,尤其是模仿移动应用程序时,,这是不够. 在放大期js为了实现类似特征,请轻喷. 不多说,上代码: /** * Created ...

  9. 万圣节福利：红孩儿3D引擎开发课程《3ds max导出插件初步》

    ds max文件夹,插件文件夹以及3ds max的可执行程序文件夹: 位的,这里要改成x64,否则启动程序后3ds max会提示"不是有效的win32程序"之类的对话框. 然后要将 ...

  10. unity 播放外部视频

    摘要: Unity支持的播放视频格式有.mov..mpg..mpeg..mp4..avi和.asf.只需将对应的视频文件拖拽入Project视图即可,它会自动生成对应的MovieTexture对象. ...