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); //服务的基本 ...

随机推荐

linux杂记（？）命令别名——alias
linux中的命令别名--alias linux中的命令别名--alias 1. 用命令alias可以查询系统中有哪些可用的命令别名 2.添加命令别名回车查看, 别名建立成功 3.查询命令的地址ty ...
一个原生js写的加减乘除运算
根据我的经验我说的再多也没人看,不过还是简单介绍下效果吧,可以选择+,-,*,/,去计算数据,喜欢的话就粘贴复制自己看去吧! <!DOCTYPE html PUBLIC "-//W3C ...
python request模块学习
安装: pip install requests 使用: import requests HTTP请求:GET.POST.PUT.DELETE.HEAD.OPTIONS 1) get res = re ...
AngularJS bootStraping
看这个 http://www.dotnet-tricks.com/Tutorial/angularjs/5aWL261214-Understanding-AngularJS-Bootstrap-Pro ...
类型萃取(type traits)
1. 类型萃取的作用类型萃取使用模板技术来萃取类型(包含自定义类型和内置类型)的某些特性,用以判断该类型是否含有某些特性,从而在泛型算法中来对该类型进行特殊的处理用来提高效率或者其他.例如:在STL ...
Nitrous.IO融资665万美元帮助开发者省去配置调试等工作-CSDN.NET
Intro to Computer Science Class Online (CS101) - Udacity Building a Search Engine Nitrous.IO融资665万美元 ...
HDU 1051 Wooden Sticks (贪心)
Wooden Sticks Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...
linux下用mail发送邮件
利用外部邮箱发送邮件的方法 bin/mail会默认使用本地sendmail发送邮件,这样要求本地的机器必须安装和启动Sendmail服务,配置很麻烦,并且会带来不必要的资源占用.而通过改动配置文件能 ...
【Android界面实现】信息更新小红点显示——自己定义控件BadgeView的使用介绍
在如今大部分的信息公布类应用,都有这样的一个功能:当后台数据更新,比方有系统消息或者是用户间有互动的时候,通过在控件上显示一个小红点来提示用户有新的信息.一般来说,这样的业务需求,我们能够在布局文件里 ...
Hadoop-04-HBase全然分布式环境搭建
Hbase分布式具体安装步骤 Hadoop全然分布式环境已经搭建完毕(參见01_Hadoop全然分布式环境搭建). 注意:Hbase和Hadoop的版本号必须相应! 不然会出现各种问题! 这里选用的是 ...

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

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

随机推荐

热门专题