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. Cannot find config.m4. Make sure that you run '/usr/local/php/bin/phpize' in the top level source directory of the module的 解决方法

    cp /php-7.1.22/ext/openssl/config0.m4 /usr/local/php/bin/config.m4

  2. 《DSP using MATLAB》Problem 3.18

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  3. test20180922 古代龙人的谜题

    题意 问题描述 Mark Douglas是一名调查员.他接受了「调查古代龙人」的任务.经过千辛万苦,Mark终于找到了一位古代龙人.Mark找到他时,他正在摆弄一些秘药,其中一些药丸由于是从很久以前流 ...

  4. dgraph cluster docker-compose 安装

    dgraph 是一款基于golang 的图数据库,使用了graphql+ 的查询方式 集群的安装官方也提供了对应的模版,比较简单 docker-compose 文件 我做了一些简单修改(数据存储的问题 ...

  5. 转 Apache Kafka：下一代分布式消息系统

    简介 Apache Kafka是分布式发布-订阅消息系统.它最初由LinkedIn公司开发,之后成为Apache项目的一部分.Kafka是一种快速.可扩展的.设计内在就是分布式的,分区的和可复制的提交 ...

  6. sql 语句执行顺序

    一.sql语句的执行步骤: 1)语法分析,分析语句的语法是否符合规范,衡量语句中各表达式的意义. 2) 语义分析,检查语句中涉及的所有数据库对象是否存在,且用户有相应的权限. 3)视图转换,将涉及视图 ...

  7. 7zip命令行中文说明

    7z.exe 是 7-Zip 的命令行版本.7z.exe 使用 7-Zip 的其它模块,7za.exe 是7-Zip 的独立版本,7za.exe 仅支持 7z.zip.gzip.bzip2 和 tar ...

  8. juc并发工具类之CountDownLatch闭锁

    import java.util.concurrent.CountDownLatch; /** * 闭锁: 在进行某些运算时, 只有其他所有线程的运算全部完成,当前运算才继续执行(程序流中加了一道栅栏 ...

  9. STORJ 有实际应用

    STORJ 有实际应用,Filezilla 支持 STORJ 的分布式协议.

  10. 一 JAVA整体概念以及安装部署

    JAVA 基本概念  JVM(JAVA virtual machine)java虚拟机,是java的能跨平台的核心,java的跨平台实现,就是在各种系统中布置JVM,然后java应用运行在JVM中,相 ...