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. 【poj3169】【差分约束+spfa】

    题目链接http://poj.org/problem?id=3169 题目大意: 一些牛按序号排成一条直线. 有两种要求,A和B距离不得超过X,还有一种是C和D距离不得少于Y,问可能的最大距离.如果没 ...

  2. JS new RegExp

    ★实例: var regex = new RegExp('k', 'g'); var v1 = 'akbdk'; v1.match(regex); //检索'k',返回数组(次数组中放的是 目标区域中 ...

  3. jquery，从后台查数据，给页面上添加树形。

    前台jquery+ajax请求往页面上添加树形的js代码 //传入当前点击节点的id,在后台代码查询出parentid=当前节点id的记录数,从而实现点击当前节点,往后台发送ajax请求,查询出子节点 ...

  4. 剑指offer-特定二维数组中查找一个元素是否存在-二分搜索-二维数组

    int [][] array ={ {1,2,8,9}, {2,4,9,12}, {4,7,10,13}, {6,8,11,19} }; 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都 ...

  5. yocto和bitbake

    一.yocto 1.yocto简介 Yocto 是一个开源社区通过它提供模版.工具和方法帮助开发者创建基于linux内核的定制系统,支持ARM, PPC, MIPS, x86 (32 & 64 ...

  6. MySQL Group Replication

    group replication是一种全新的高可用,高扩张的MySQL集群服务.高一致性,基于原生复制及paxos协议的组复制技术,以插件方式提供一致数据安全保证:高容错性,大多数服务正常就可继续工 ...

  7. 海思3518EV200 SDK中获取和保存H.264码流详解

    /****************************************** step 2: Start to get streams of each channel. ********** ...

  8. map的put和putIfAbsent使用

    源码中传入key和value,根据key获取看是否存在value,如果value==null,然后调用put方法把传入的key和value  put进map,返回根据key获取的老value 意思就是 ...

  9. 使用php在服务器端生成图文验证码（二）

    图文验证码的实现原理: 1):准备些许图片将其存储在数据库,每一张图片对应一个标识字段. 2):在服务器端使用数组的形式将图片与标识字段组合起来. 3):随机给客户端返回图片,并接受用户输入的字段. ...

  10. 虚拟机设置成桥接模式x86_openwrt也可以上网

    一.虚拟机桥接设置 1. 2.选择 虚拟机 >>设置 三.ip设置,要在同一网段,能够分配到路由的ip地址 1.主机ip 2.虚拟机中x86_openwrt ip 四.openwrt设置 ...