javaweb学习路之三--websocket多人在线聊天

在之前的项目基础上，加入了一个聊天室的功能，为了界面好看引入了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多人在线聊天的更多相关文章

基于JQuery+JSP的无数据库无刷新多人在线聊天室
JQuery是一款非常强大的javascript插件,本文就针对Ajax前台和JSP后台来实现一个无刷新的多人在线聊天室,该实现的数据全部存储在服务端内存里,没有用到数据库,本文会提供所有源程序,需要 ...
Spring Websocket实现简易在线聊天功能
针对Spring Websocket的实现,我参照了其他博主的文章https://www.cnblogs.com/leechenxiang/p/5306372.html 下面直接给出实现: 一.引入相 ...
一个Java编写的小玩意儿---多人在线聊天工具
这个在线聊天工具小项目使用JAVA编写,用JAVA来做图形界面本来就是出了名的低效和丑陋.不过这不是重点.写这个小项目的目的在于串一串J2SE的知识,把当时写这个项目的时候的思路梳理一下.时间有点久了 ...
javaweb学习路之四--cxf发布Webservice
背景:maven构建的springMvc+mybatis框架源码--->https://github.com/Zering/MyWeb 步骤:(本步骤是自己在实际探索过程中的步骤,我的思路是先 ...
javaweb学习路之二--上传gitgub
代码上传github 代码上传到github的步骤第一步:申请github账号 https://github.com/注册账号第二步:登录github,新建repository仓库,命名,创建第 ...
javaweb学习路之一--web项目搭建
概述: 工作闲暇时间想要自己搭建一个web项目玩玩,没想到大半天才弄了一个springMVC+mybatis的网站,简直菜的不行,以下记录所有的步骤加深印象使用环境 1.jdk1.8 2.maven ...
websocket简单实现在线聊天
WebSocket简介与消息推送 B/S架构的系统多使用HTTP协议,HTTP协议的特点: 1 无状态协议2 用于通过 Internet 发送请求消息和响应消息3 使用端口接收和发送消息,默认为80端 ...
用NodeJS打造多人在线聊天室（NodeJS & SocketIO & Express & EJS & MongoDB & Gulp）
项目背景这个项目主要是为了玩玩NodeJS,项目的方向大概是做出类似QQ的在线聊天系统.想要在线体验可以点击在线演示. 项目使用PM2进行部署和管理,功能在不断的迭代开发中.如果你觉得这个项目比较有 ...
php使用swoole实现一个简单的多人在线聊天群发
聊天逻辑的好多细节没有实现,只实现群发. php代码: $serv = new swoole_websocket_server("127.0.0.1",3999); //服务的基本 ...

随机推荐

HTML中小问题
1.a标签不添加href这个属性时,不会出现鼠标变成手型~
windows理论基础（一）
windows体系结构一. 用户模式和内核模式 (user mode &kernel mode) Intel x86 处理器的体系结构定义了四种特权级,或特为四个环.来保护系统代码不会被低 ...
sql2012管理
一.还原完整备份的语法如下: RESTORE DATABASE { database_name | @database_name_var } --数据库名 [ FRO ...
Qt保证只有一个实例（将CreateMutex得到的handle通过转换得到值）
使用CreateMutex 可以实现只启动一个应用程序实例 view plaincopy to clipboardprint?#include <QApplication>#include ...
如何使用Palette提取Bitmap的颜色
5.X提出了color palette 的概念,能够让主题动态的去适应当前的页面色调,让整个app色调看起来比较和谐统一那么如何使用Palette呢,必不可少,我们需要在Android studio ...
Forstner算子
linux下coredump的产生及调试方法
什么是coredump 通常情况下coredmp包括了程序执行时的内存,寄存器状态,堆栈指针,内存管理信息等.能够理解为把程序工作的当前状态存储成一个文件.很多程序和操作系统出错时会自己主动生成一个c ...
POJ训练计划1459_Power Network(网络流最大流/Dinic)
解题报告这题建模实在是好建.,,好贱.., 给前向星给跪了,纯dinic的前向星居然TLE,sad.,,回头看看优化,.. 矩阵跑过了.2A,sad,,, /******************** ...
练习笔记:net,JqueryUI实现自动补全功能
1.首先建立个空的Web项目 2.将下载好的JqueryUI文件保存到JS文件加下 3.引入JS文件 <link href="JS/css/ui-lightness/jquery-ui ...
HTML5API___manifest
离线缓存 manifest 在html标签里面增加个属性 mainfest 就可以告诉浏览器缓存文件在哪里. <html manifest='show.manifest' xmlns=" ...

javaweb学习路之三--websocket多人在线聊天

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

随机推荐

热门专题