JAVA WebSocKet ( 实现简单的前后端即时通信 )
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 ( 实现简单的前后端即时通信 )的更多相关文章
- 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互
说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...
- 一个Java程序猿眼中的前后端分离以及Vue.js入门
松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人感觉这个是最好的 Vue.js 学习资料 ...
- 【springMVC】简单的前后端数据交流
最最常见两种,一则返回视图模板(文档),二则为json数据.就使用一个源代码文件来看看springmvc是怎么做到的. 1.UserController.java源代码文件 (这里额外的使用了fast ...
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- websocket 和 dwr 做web端即时通信
一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有1.1和1.0之说,也就是所谓的k ...
- vue的初识与简单使用---前后端分离通过接口调取数据
vue的安装 #### .环境搭建 ''' - 安装node ``` 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ ``` - 安装cnpm ``` npm inst ...
- centos7上用docker搭建简单的前后端分离项目
1. 安装docker Docker 要求 CentOS 系统的内核版本高于 3.10 ,首先验证你的CentOS 版本是否支持 Docker . 通过 uname -r 命令查看你当前的内核版本 使 ...
- Java+Netty、Vue+Element-UI实现的即时通信应用 leo-im
之前工作接触了几个开源的IM产品,再加上曾经用Netty实现过几个服务,于是就有了用Netty实现一个IM的想法,于是用业余时间写了一个IM,和喜欢Netty的程序员们分享. 考虑到方便扩展,在服务端 ...
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
随机推荐
- python 获取excel文件的所有sheet名字
当一个excel文件的sheet比较多时候, 这时候需要获取所有的sheet的名字. xl = pd.ExcelFile('foo.xls') xl.sheet_names # see all she ...
- Sencha Touch+PhoneGap打造超级奶爸之喂养记(一) 源码免费提供（转）
起源 非常高兴我的宝宝健康平安的出生了.对于初次做奶爸的我,喜悦过后,面临着各中担心,担心宝宝各项指标是否正常.最初几天都是在医院待着,从出生那一天开始,护士妹妹隔一段时间就会来问宝宝的喂奶,大小便, ...
- solr学习四（关于性能的杂知识）
将所有只用于搜索的,而不需要作为结果的field(特别是一些比较大的field)的stored设置为false 比如我们在solr中index了一篇word,对于这篇word,我们只需要这篇文章的下载 ...
- [转]Maven中profile和filtering实现多个环境下的属性过滤
背景 项目构建的时候,需要根据不同的场景来改变项目中的属性资源,最为常见的莫过于数据库连接配置了,试想有生产环境.测试缓存.发布环境等,需要为不同的场景下来动态的改变数据库的连接配置.而使用maven ...
- mac 下 mysql 安装
1. 下载安装文件: 下载地址:https://dev.mysql.com/downloads/mysql/ 下载后缀名为dmg的安装文件 2. 启动mysql 安装后,打开"系统偏好设置& ...
- asp.net core控制台项目运行
cmd中进入项目生成的dll目录下 运行命令: start dotnet xxx.dll
- golang init函数
init函数有一下几点特性: init函数在main执行之前,自动被调用执行的,不能显示调用 每个包的init函数在包被引用时,自动被调用 每个包可以有多个init函数 同一个文件中可定义多个init ...
- R(5): sql 数据处理
sqldf程序包是R语言中实用的数据管理辅助工具,但最新版本的包在处理中文时出现乱码,待解决 Usage: sqldf(x, stringsAsFactors = FALSE, row.names ...
- Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册
头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...
- WPF Demo3
<Window x:Class="Demo3.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/ ...