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. PNG文件结构

    对于一个PNG文件来说,其文件头总是由位固定的字节来描述的,HEX: 89 50 4E 47 0D 0A 1A 0A 使用ultra打开一个png图片,结果如下: 其中第一个字节0x89超出了ASCI ...

  2. 51Nod1526 分配笔名

    分析 在trie树上贪心,将所有串加入trie树中,在深度较深的地方匹配会更优. 由于只需要知道最后的总质量,所以直接取每个点的子树中最大的匹配即可 复杂度\(O(\sum len)\) 加串的时候把 ...

  3. 2、let 和 const 命令

    let 命令 块级作用域 const 命令 顶层对象的属性 global 对象 let 命令 基本用法 ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所 ...

  4. java安全性-引用-分层-解耦

    Java不支持指针, 一切对内存的访问都必须通过对象的实例变量来实现,这样就防止程序员使用 "特洛伊"木马等欺骗手段访问对象的私有成员 访问一个对象必须通过这个对象的引用 java ...

  5. 应用解决告诉你什么时候该用ajax

    第一.请求的提交是为了页面数据的显示,这时候用户一般不希望看到页面的刷新,是使用AJAX的一个最佳时候. 第二.如果请求提交后,用户能从页面感觉到提交结果,这时候,也最好不要有页面刷新,推荐使用AJA ...

  6. Java]运算符优先级

    https://blog.csdn.net/xiaoli_feng/article/details/4567184

  7. net core 2.0学习笔记（一）：开发运行环境搭建 (转)

    期待已久的.net core 2.0终于发布了!大家等的花儿都谢了. 不过比预期提前了一个多月,这在微软历史上还真的不多见.按照历史经验看,2.0版本应该比较靠谱,我猜这也是社区非常火爆的原因吧.下面 ...

  8. IE8下部分方法失效的解决方法

    1.IE8下String的Trim()方法失效的解决方法 用jquery的trim()方法,$.trim(str)就可以了: 例:_id.trim() !='' 改为  $.trim(_id) != ...

  9. wxWidgets：入门

    0. 介绍 wxWidgets是一个开源的跨平台的C++构架库(framework),它可以提供GUI和其它工具.目前的3.0.0版本支持所有版本的Windows.带GTK+或Motif的Unix和M ...

  10. EINTR与ERESTARTSYS

    驱动中如果down_interruptible之类的函数被信号中断,驱动可以返回-EINTR或-ERESTARTSYS. 区别在于: 若返回-EINTR,应用程序执行的系统调用会返回表示错误的值,且e ...