1, 前端代码 HTML5 部分

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>WebSocket</title>

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

</head>

<body>

    <input id="CreateSocket" type="button" value="创建WebSocKet" />

    <input id="Message" type="text" value=""/>

    <input id="Send" type="button" value="发送" />

    <input id="Close" type="button" value="关闭WebSocket" />

</body>

<script type="text/javascript">

    /**

     * 创建 WebSocKet 的方法

     */

    function createWebSocket(urlValue){

        if("WebSocket" in window){

            return new WebSocket(urlValue);

        }

        if ("MozWebSocket" in window){

            return new MozWebSocket(urlValue);

        }

        console.error("浏览器不支持 WebSocKet");

    }

    /**

     * 1, 创建WebSocket

     * 2, WebScoket 的地址为ws协议

     */

    var webSocket = null;

    var urlValue = "ws://localhost/WebTest/WebSocket";

    $('#CreateSocket').on('click', function(){

        webSocket = createWebSocket(urlValue);

        // 服务器返回数据时执行

        webSocket.onmessage = function(msg){

            console.log(msg.data);

        }

        // 请求关闭时执行

        webSocket.onclose = function(){

            console.log(arguments);

        }

    });

    $('#Send').on('click', function(){

        var message = $('#Message').val().trim();

        if(message == ""){

            console.error("发送的内容不能为空!");

            return;

        }

        if(webSocket == null){

            console.error("未创建 WebSocket 请求!");

            return;

        }

        // 向服务器发送请求的方法

        webSocket.send(message);

        $('#Message').val("");

    });

</script>

2, JAVA端 WebSocKet 配置类

package socket_web;

import java.util.Set;

import javax.websocket.Endpoint;

import javax.websocket.server.ServerApplicationConfig;

import javax.websocket.server.ServerEndpointConfig;

/**

 * 1, webSocket 的配置类, 需要实现接口 ServerApplicationConfig

 * 2, webSocket 类在扫描到之后根据需要在实现的方法中进行一定的过滤, 返回过滤后的才能被前端访问

 * 3, getAnnotatedEndpointClasses 基于注解的 webSocket 扫描方法

 * 4, getEndpointConfigs 基于 XML 配置文件的的 webSocket 扫描方法

 */

public class MyWbeSocketConfig implements ServerApplicationConfig {

    @Override

    public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> webSockets) {

        return webSockets;

    }

    @Override

    public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {

        return null;

    }

}

3, JAVA 端 WebSocket 

package socket_web;

import java.io.IOException;

import javax.websocket.OnClose;

import javax.websocket.OnMessage;

import javax.websocket.OnOpen;

import javax.websocket.Session;

import javax.websocket.server.ServerEndpoint;

/**

 * 1, WebSocket可以通过注解的方式声明  @ServerEndpoint("/WebSocket")

 * 2, 添加注解之后需要在配置文件中返回, 在配置文件中可以过滤

 * 3, WebSocket 和 Servlet 相同都是多列的, 不会互相干扰

 * 4, WebSocket 请求时访问 open  方法, 可以用注解 @OnOpen 标明

 * 5, WebSocket 关闭时访问 close 方法, 可以用注解 @OnClose 表名

 */

@ServerEndpoint("/WebSocket")

public class WebSocketDemo {

    @OnOpen

    public void open(Session session) {

        String id = session.getId();

        System.out.println("通道 " + id + " 打开");

    }

    @OnClose

    public void close (Session session) {

        String id = session.getId();

        try {

            session.getBasicRemote().sendText("客户端" + id + "关闭成功");

        } catch (IOException e) {

            System.out.println("客户端" + id + "关闭失败");

        }

    }

    @OnMessage

    public void message(Session session, String msg) {

        String outMessade = "客户端 " + session.getId() + " 说:" + msg;

        System.out.println(outMessade);

        String returnMessage = "你刚才说:" + msg;

        try {

            session.getBasicRemote().sendText(returnMessage);

        } catch (IOException e) {

            System.out.println("返回数据失败");

        }

     }

}

JAVA WebSocKet ( 实现简单的前后端即时通信 )的更多相关文章

  1. 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

    说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...

  2. 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...

  3. 【springMVC】简单的前后端数据交流

    最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fast ...

  4. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  5. websocket 和 dwr 做web端即时通信

    一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有1.1和1.0之说,也就是所谓的k ...

  6. vue的初识与简单使用---前后端分离通过接口调取数据

    vue的安装 #### .环境搭建 ''' - 安装node ``` 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ ``` - 安装cnpm ``` npm inst ...

  7. centos7上用docker搭建简单的前后端分离项目

    1. 安装docker Docker 要求 CentOS 系统的内核版本高于 3.10 ,首先验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你当前的内核版本 使 ...

  8. Java+Netty、Vue+Element-UI实现的即时通信应用 leo-im

    之前工作接触了几个开源的IM产品,再加上曾经用Netty实现过几个服务,于是就有了用Netty实现一个IM的想法,于是用业余时间写了一个IM,和喜欢Netty的程序员们分享. 考虑到方便扩展,在服务端 ...

  9. 如何简单区分Web前后端与MVC

    MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...

随机推荐

  1. Word所有字体按比例缩小

    ctrl + [ 不然每次都要一部分一部分的修改啊

  2. Json.NET Updates: Merge, Dependency Injection, F# and JSONPath Support

    Json.NET 6.0 received 4 releases this year, the latest last week. Over these releases, several new f ...

  3. 使用EntityFramework6连接MySQL

    使用EntityFramework6连接MySQL 不是微软的亲儿子这待遇就是不一样,其中的坑可真实不少,第一次连MySQL足足折腾了我大半天. 废话不多说直接开始. 安装MySQL 从官网上下载最新 ...

  4. FastAdmin CMS 插件下载

    FastAdmin CMS 插件下载 CMS内容管理系统插件(含小程序) 自定义内容模型.自定义单页.自定义表单.自定义会员发布.付费阅读.小程序等 提供全部前后端源代码和小程序源代码 功能特性 基于 ...

  5. 充电 IC 对 0V 电池充电问题

    只讨论锂聚合物电池,由于设置漏电流原因,有些锂电池会放电到 0V(正常是不应该的). 但是在时候就是会发电到 0V,这里就要考虑充电 IC 是否有对 0V 电池充电的功能,还有保护 IC 是否允许 0 ...

  6. RabbitMQ客户端负载均衡算法

    负载均衡(Load balance)是一种计算机网络技术,用于在多个计算机(计算机集群).网络连接.CPU.磁盘驱动器或其他资源中分配负载,以达到最佳资源使用.最大化吞吐率.最小响应时间以及避免过载的 ...

  7. Angular 4 模板表单校验

    1. 创建指令 ng g directive directives/mobileValidator 2. html <form #myForm="ngForm" (ngSub ...

  8. php中二维数组排序问题方法详解

    PHP中二维数组排序,可以使用PHP内置函数uasort() 示例一: 使用用户自定义的比较函数对数组中的值进行排序并保持索引关联 回调函数如下:注意回调函数的返回值是负数或者是false的时候,表示 ...

  9. Linux下解压缩命令

    1. tar格式 解包:[*******]$ tar xvf FileName.tar 打包[---]:[*******]$ tar cvf FileName.tar DirName(注:tar是打包 ...

  10. 多线程执行顺序诡异现象谈，你不知道的pthread_create

    引文:学而时习之,不亦说乎.总是忙于具体项目,业务功能的实现:关于编程本身的技能都要有些生疏了,于是就选择了几个专题做了一次温习,重点放在了多线程和多进程上,跑了一个实例,居然有新的发现: (1)多个 ...