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. hdu2073-2078

    hdu2073 数学 #include<stdio.h> #include<math.h> double len(double x){ )*(x+)); } int main( ...

  2. Boosting学习笔记（Adboost、GBDT、Xgboost）

    转载请注明出处:http://www.cnblogs.com/willnote/p/6801496.html 前言 本文为学习boosting时整理的笔记,全文主要包括以下几个部分: 对集成学习进行了 ...

  3. 转 JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  4. NoSQLUnit

    NoSQLUnit Core Overview Unit testing is a method by which the smallest testable part of an applicati ...

  5. 使用python把html网页转成pdf文件

    我们看到一些比较写的比较好文章或者博客的时候,想保存下来到本地当一个pdf文件,当做自己的知识储备,以后即使这个博客或者文章的连接不存在了,或者被删掉,咱们自己也还有. 当然咱们作为一个coder,这 ...

  6. 使用OPRT库来实现局域网视频实时传输

    转载,侵删 4.代码设计 目的:使用OPRT库来实现局域网视频实时传输 参考samle_venc.c进行ortp开发 4.1.程序流程如下 step1:定义变量,VPSS,VENC,零散变量 step ...

  7. npm 发包的简易流程

     发包的简易流程: https://www.jianshu.com/p/ea64fd01679c 错误集锦: npm publish error: 403. You do not have permi ...

  8. 使用Angular提交表单

    使用Angular提交表单 我们准备在之前使用的<script>标签中设置我们的Angular应用.所以删除里面的内容,我们就可以开始了. 设置一个Angular应用 步骤为: 1. 加载 ...

  9. PHP中imagecopyresampled参数详解

    原文链接http://blog.csdn.net/ajaxchen_615/article/details/5941181 做php缩微图程序,用到了imagecopyresampled函数,在网上找 ...

  10. 异步FIFO空满设计延迟问题

    由于设计的时候读写指针用了至少两级寄存器同步,同步会消耗至少两个时钟周期,势必会使得判断空或满有所延迟,这会不会导致设计出错呢? 异步FIFO通过比较读写指针进行满空判断,但是读写指针属于不同的时钟域 ...