随着互联网的发展,http的协议有些时候不能满足需求,比如在现聊天的实现.如果使用http协议必须轮训,或者使用长链接.必须要一个request,这样后台才能发送信息到前端.

后台不能主动找客户端通信.而且每次请求heard都带有很多的信息.这样也很占用宽带.这是websocket.

因为主要是为了学习,所以前台很粗糙.没有css.

1.后台实现

后台一共有两个类 一个是个imessage类,就是一个信息的bean.另一个类是socket,这个类主要是处理信息的发送.

Message.java如下:

 package com.socket;

 public class Message {

     private String id;

     private String msg;

     private String from;

     private String to;

     public String getFrom() {

         return from;

     }

     public void setFrom(String from) {

         this.from = from;

     }

     public String getTo() {

         return to;

     }

     public void setTo(String to) {

         this.to = to;

     }

     public String getId() {

         return id;

     }

     public void setId(String id) {

         this.id = id;

     }

     public String getMsg() {

         return msg;

     }

     public void setMsg(String msg) {

         this.msg = msg;

     }

 }

socket.Java代码如下:

 package com.socket;

 import java.io.IOException;

 import java.util.HashMap;

 import java.util.Map;

 import java.util.Set;

 import javax.websocket.OnMessage;

 import javax.websocket.OnOpen;

 import javax.websocket.Session;

 import javax.websocket.server.ServerEndpoint;

 import com.google.gson.Gson;

 @ServerEndpoint("/websocket")

 public class Socket {

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

     private Session session;

     @OnOpen

     public void startSocket(Session session) {

         this.session = session;

         System.out.println("链接成功");

         if (sessionMap.size() == 0) {

             return ;

         }

         Set userIds = sessionMap.keySet();

         StringBuffer sBuffer  = new StringBuffer();

         for (Object str : userIds) {

             sBuffer.append(str.toString() + ":");

         }

         Gson gson = new Gson();

         try {

             Message message = new Message();

             message.setFrom("系统");

             message.setMsg(sBuffer.toString());

             session.getBasicRemote().sendText(gson.toJson(message),true);

         } catch (IOException e) {

             // TODO Auto-generated catch block

             e.printStackTrace();

         }

     }

     @OnMessage

     public void getMessgae(Session session, String str, boolean last) {

         if (session.isOpen()) {

             try {

                 System.out.println(str);

                 Gson gson = new Gson();

                 Message msg = gson.fromJson(str, Message.class);

                 Message toMessage = msg;

                 toMessage.setFrom(msg.getId());

                 toMessage.setTo(msg.getTo());

                 if (msg.getMsg().equals("newUser")) {

                     if (sessionMap.containsKey(msg.getId())) {

                         sessionMap.remove(msg.getId());

                     }

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

                 } else {

                     Session toSession = sessionMap.get(msg.getTo());

                     if (toSession != null && toSession.isOpen()) {

                         toSession.getBasicRemote().sendText(gson.toJson(toMessage).toString(), last);

                     } else {

                         toMessage.setMsg("用户不存在");

                         toMessage.setFrom("系统");

                         session.getBasicRemote().sendText(gson.toJson(toMessage).toString(), last);

                     }

                 }

             } catch (IOException e) {

                 // TODO Auto-generated catch block

                 e.printStackTrace();

             }

         } else {

             System.out.println("session is closed");

         }

     }

 }

2 前端代码

前台主要使用的是Jquery库来操作一些dom. 后台开启的是 8889端口，所以前端要调用 ws://localhost:8889/webChat/websocket，如果自己实现请改自己的端口

js和html如下:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>Test WebSocket</title>

        <script type="text/javascript" src="js/jquery.min.js"></script>

        <script type="text/javascript" >

        $(function() {

            var url = "ws://localhost:8889/webChat/websocket";

            var ws = "";

            var message ={"id":"","msg":"","form":"","to":""};

            function connection() {

                ws = new WebSocket(url);

                console.log("connection.......");

                ws.onmessage = function (e){

                    var json = eval('(' +  e.data.toString() + ')');

                    showMessage(json.from +":"+ json.msg);

                }

                ws.onclose = function() {

                    showMessage("close");

                }

                ws.onerror = function (e){

                    showMessage("error");

                }

                ws.onopen = function() {

                    showMessage("链接成功")

                    message.id = $(".identity").val();

                    message.msg = "newUser";

                    console.log(JSON.stringify(message));

                    ws.send(JSON.stringify(message));

                    message.msg = "";

                }

            }

            $(".start-conn-btn").click(function() {

                connection();

            });

            $(".send-btn").click(function() {//send message

                message.to = $(".to-user").val();

                message.msg = $(".msg-context").val();

                $(".msg-context").val("");

                ws.send(JSON.stringify(message));

                showMessage( "我:" + message.msg );

                message.msg = "";

            });

            function showMessage(msg) {

                $(".show-message").append( msg + "<br/>");

            }

        });

        </script>

    </head>

    <body>

       <div class="container">

           <div calss="item">

           <span>ID:</span>

           <input type="text" class="identity">

           <button class="start-conn-btn" >链接</button>

           <span>toUser:</span>

           <input type="text" class="to-user">

           </div>

           <div class="show-message">

           </div>

           <div calss="item">

           <span>内容:</span>

           <textarea  class="msg-context"></textarea>

           </div>

           <div><button class="send-btn">send</button></div>

       </div>

    </body> 

</html>

以上的这些就是简单的实现一个在线web聊天.

java web 在线聊天的基本实现的更多相关文章

  1. 基于Java的在线聊天室

    概述 Java socket编程,实现一个在线聊天室, 实现在线用户群聊,私聊,发送文件等功能. 详细 代码下载:http://www.demodashi.com/demo/13623.html 一. ...

  2. 基于 NodeJs 打造 Web 在线聊天室

    Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...

  3. 实践:Backbone作前端,Django+Tastypie作后端的简单Web在线聊天室

    一.界面设计: 二.数据模型设计 id 每个发言都有一个独立的id由tastypie自动生成 content 发言的内容 username 发言者 date 发言时间 三.前端制作 这里没有用到Bac ...

  4. java web 在线编辑Excel -- x-spreadsheet

    --- x-spreadsheet --- 文档 https://hondrytravis.com/x-spreadsheet-doc/ <%@ page language="java ...

  5. web 在线聊天的基本实现

    参考:https://www.cnblogs.com/guoke-jsp/p/6047496.html

  6. atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 。打开浏览服务器文件夹java .net php

    atitit. web 在线文件管理器最佳实践(1)--- elFinder 的使用流程解决之道 .打开浏览服务器文件夹java .net php 1. 环境:::项目java web,需要打开浏览服 ...

  7. 基于Server-Sent Event的简单聊天室　Web 2.0时代，即时通信已经成为必不可少的网站功能，那实现Web即时通信的机制有哪些呢？在这门项目课中我们将一一介绍。最后我们将会实现一个基于Server-Sent Event和Flask简单的在线聊天室。

    基于Server-Sent Event的简单聊天室 Web 2.0时代,即时通信已经成为必不可少的网站功能,那实现Web即时通信的机制有哪些呢?在这门项目课中我们将一一介绍.最后我们将会实现一个基于S ...

  8. java Socket实现简单在线聊天（三）

    在上一篇,利用线程使服务端实现了能够接收多客户端请求的功能,这里便需要客户端接收多客户端消息的同时还能把消息转发到每个连接的客户端,并且客户端要能在内容显示区域显示出来,从而实现简单的在线群聊. 在实 ...

  9. java Socket实现简单在线聊天（二）

    接<java Socket实现简单在线聊天(一)>,在单客户端连接的基础上,这里第二步需要实现多客户端的连接,也就需要使用到线程.每当有一个新的客户端连接上来,服务端便需要新启动一个线程进 ...

随机推荐

  1. Implement int sqrt(int x).

    自己设计函数,实现求根号.x是非负整数. Input: 8 Output: 2 当开出根号后有小数,则省略小数部分.. 思路:只要找到一个数a,a*a<=x而且(a+1)*(a+1)>x, ...

  2. 新型USB病毒BadUSB 即使U盘被格式化也无法根除

    这种病毒并不存在于USB设备中的存储文件中,而是根植于USB设备的固件里.这意味着,即使用户对U盘进行全面的格式化清理,仍不能"杀死"它.

  3. % 与 format 进行字符串格式化

    字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 1.百分号方式 %[(name)][flags][width].[precision]typecode (name) ...

  4. 在C++98基础上学习C++11新特性

    自己一直用的是C++98规范来编程,对于C++11只闻其名却没用过其特性.近期因为工作的需要,需要掌握C++11的一些特性,所以查阅了一些C++11资料.因为自己有C++98的基础,所以从C++98过 ...

  5. msql索引

    从网上找了两种解决方案: 最近要给一个表加一个联合唯一索引,但是表中的两个联合健有重复值,导致无法创建: 解决方案一:ignore(会删除重复的记录(重复记录只保留一条,其他的删除),然后建立唯一索引 ...

  6. Spring Boot实战笔记（一）-- Spring简介

    一.Spring 概述 Spring框架是一个轻量级的企业级开发的一站式解决方案.所谓的解决方案就是可以基于Spring解决所有的Java EE开发的所有问题. Spring框架主要提供了Ioc(In ...

  7. Unity3D学习（五）：实现一个简单的视觉感知

    前言 在很多第一人称或者第三人称射击游戏的单人模式中,玩家的乐趣往往来源于和各式各样的AI敌人的战斗.而战斗的爆发很多时候是因为这些AI在"看见"玩家后就会立即做出反应,比如开火. ...

  8. java客户端调用webService

    啥也不想说,以前使用的方法突然不行了.各种网搜(记得别忘记到jar包哦:axis.jar) 看代码,第一种方式,也就是以前的方式: 改方式不用表名参数名称 public static String i ...

  9. PAT1017:Queueing at Bank

    1017. Queueing at Bank (25) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Supp ...

  10. 云计算大数据：Xen、KVM、VMware、hyper-v等虚拟化技术的比较

    1.Xen.KVM.VMware.hyper-v等虚拟化技术的比较,xen和kvm,是开源免费的虚拟化软件. vmware是付费的虚拟化软件. hyper-v比较特别,是微软windows 2008 ...