websocket入门案例(echo)
websocket是用来干什么的,具体的请自行百度。
本文实现一个简单的websocket的入门小例子,实现客户端发送一句换,服务器端返回。即一个简单的交互。
一、服务器端的实现
1.创建一个类实现ServerApplicationConfig接口
2.编写一个后台websocket服务类,使用@ServerEndpoint注解标注。
第一步代码:
/**
* 该类在服务器启动时,会自动执行
*
* @author huan
*
*/
public class EchoConfig implements ServerApplicationConfig {
private Logger log = Logger.getLogger(EchoConfig.class);
/**
* 基于注解的实现方式,<br />
* classess 中的类是实现了有@ServerEndpoint标注的类
*/
@Override
public Set<Class<?>> getAnnotatedEndpointClasses(Set<Class<?>> classes) {
log.info("服务器启动...");
for (Class<?> clazz : classes) {
log.info("加载的websocket服务类:" + clazz.getName());
}
return classes;
}
/**
* 基于接口的实现方式
*/
@Override
public Set<ServerEndpointConfig> getEndpointConfigs(Set<Class<? extends Endpoint>> arg0) {
return null;
}
}
第二步代码:
@ServerEndpoint("/echo4me")
public class EchoServer {
private static Logger log = Logger.getLogger(EchoServer.class);
public EchoServer() {
}
@OnOpen
public void open(Session session) throws IOException {
log.info("一个客户端建立连接: websocket session id -> " + session.getId());
if (session.isOpen()) {
session.getBasicRemote().sendText("欢迎建立连接.");
}
}
@OnClose
public void onClose() {
log.info("websocket关闭.");
}
@OnMessage
public void onMessage(Session session, String msg) {
log.info("客户端发送的消息:" + msg);
if (session.isOpen()) {
try {
session.getBasicRemote().sendText("服务器返回的数据:"+msg);
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
注意:1、上面的类中必须要有一个无参数的构造器方法
2、方法中的参数 session 并不是httpsession,而是websocket中的session
3、@ServerEndpoint("/echo4me")标注的类不用再配置中配置,它表示一个websocket的服务端,echo4me表示访问的路径, 即访问路径为:http://localhost:端口/项目部署名/echo4me
4、@OnMessage表示客户端发送消息过来时触发。
二、前台的写法:
1.创建websocket请求,
2.打开请求
3.发送数据
js部分:
<strong><script type="text/javascript">
var ws = null;
function openConnection(){
var target = "ws://localhost:8080/study-websocket/echo4me"
if ('WebSocket' in window) {
ws = new WebSocket(target);
} else if ('MozWebSocket' in window) {
ws = new MozWebSocket(target);
} else {
alert('WebSocket is not supported by this browser.');
return;
}
console.info('连接websocket成功.');
ws.onopen = function(){
}
ws.onerror = function(e){
console.info("发生错误:");
console.warn(w);
}
ws.onmessage = function(e){
$('#serverReturnData').val($('#serverReturnData').val()+e.data);
}
ws.onclose = function(e){
console.info("websocket关闭");
console.log(e);
}
}
$(function(){
/** 发送数据到服务器端 */
$('#sendBtn').on('click',function(){
var val = $('#sendData').val();
if(val){
if(ws){
ws.send(val);
}else{
alert('请先创建websocket连接.')
}
}else{
alert("请输入要发送给服务器端的数据.");
}
})
});
</script></strong>
注意:此处的url为 echo4me为@ServerEndpoint注解中value属性的值
<strong>var target = "ws://localhost:8080/study-websocket/echo4me"
</strong>
html代码部分:
<strong><button id="openWebsocket" onclick="openConnection()">连接服务器:</button><br/>
发送数据到服务器:<input id="sendData" /><input type="button" id="sendBtn" value="发送"/> <br/>
服务器返回的数据:<input id="serverReturnData" style="width: 100%;color: red;"/></strong>
到此,前后台都实现。
前后台交互的图片
websocket入门案例(echo)的更多相关文章
- 你所不知道的 CSS 阴影技巧与细节 滚动视差?CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- Spring学习笔记(一)—— Spring介绍及入门案例
一.Spring概述 1.1 Spring是什么 Spring是一个开源框架,是于2003年兴起的一个轻量级的Java开发框架, 由Rod Johnson 在其著作<Expert one on ...
- SpringMVC入门案例及请求流程图(关于处理器或视图解析器或处理器映射器等的初步配置)
SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...
- SpringMvc核心流程以及入门案例的搭建
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
- Struts2第一个入门案例
一.如何获取Struts2,以及Struts2资源包的目录结构的了解 Struts的官方地址为http://struts.apache.org 在他的主页当中,我们可以通过左侧的Apache ...
- MyBatis入门案例、增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
- Hibernate入门案例及增删改查
一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...
- Quartz应用实践入门案例二(基于java工程)
在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...
- Quartz应用实践入门案例一(基于Web环境)
Quartz是一个完全由java编写的开源作业调度框架,正是因为这个框架整合了许多额外的功能,所以在使用上就显得相当容易.只是需要简单的配置一下就能轻松的使用任务调度了.在Quartz中,真正执行的j ...
随机推荐
- java 线程状态 详解
线程被创建后,有一个生命周期,下图是线程的生命周期详解. java api java.lang.Thread.State 这个枚举中给出了六种线程状态,分别是: 线程状态 导致状态发生条件 NEW(新 ...
- openswan协商流程之(四):main_inI2_outR2()
主模式第四包:main_inI2_outR2 1. 序言 main_inI2_outR2()函数是ISAKMP协商过程中第四包的核心处理函数的入口,同时在此处理流程中已经获取到足够的隧道信息,可以生成 ...
- C#中的文本到语音
本演示说明了如何使用c#.net Windows Forms应用程序中的system.speech库将文本转换为语音.Microsoft .NET框架提供System.Speech.Synthesis ...
- 页面调用系统window打印
一. 打印:直接页面调用window.print(),当前页面就会转换成打印页面 当前页面是使用HTML拼接成A4纸表格样式的展示: doPrint:function(type) { // this. ...
- 如何解决浮动元素高度塌陷---CSS
解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...
- 5-21python数据类型
一.字符串,是不可变数据类型,所有字符串的方法都不会修改字符串的值,使用字符串的方法后都是生成了一个新的字符串.就因为字符串是不可变变量! 字符串的方法 1. strip(),默认去空格,但是当()中 ...
- CodeForce-799B T-shirt buying (STL_set)
有 n 件T恤.第 i 件T恤的价格为 pi .每个T恤有两面,第 i 件T恤正面颜色为 ai ,反面颜色为 bi . 有 m 个人想买T恤,每个人都恰好买一件.第 j 个人最喜欢颜色 cj. 一个人 ...
- PTA 面向对象程序设计 6-1 引用作函数形参交换两个整数
引用作函数形参交换两个整数 设计一个void类型的函数Swap,该函数有两个引用类型的参数,函数功能为实现两个整数交换的操作. 裁判测试程序样例: #include <iostream> ...
- Markdown公式用法大全
目录 基本语法 两种代码引用方式 插入链接并描述 插入图片 有序列表 无序列表 分割线 表格 如何插入公式 如何输入上下标 如何输入括号和分隔符 如何输入分数 如何输入开方 如何输入省略号 如何输入矢 ...
- 【PHP数据结构】交换排序:冒泡、快排
上篇文章中我们好好地学习了一下插入类相关的两个排序,不过,和交换类的排序对比的话,它们真的只是弟弟.甚至可以说,在所有的排序算法中,最出名的两个排序都在今天要介绍的交换排序中了.不管是冒泡.还是快排, ...