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部分:
<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>
注意:此处的url为 echo4me为@ServerEndpoint注解中value属性的值
var target = "ws://localhost:8080/study-websocket/echo4me"
html代码部分:
<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;"/>
到此,前后台都实现。
前后台交互的图片
相关推荐
websocket使用入门案例,详情请见博客http://blog.csdn.net/u012702547/article/details/77655826
WebSocket入门实战工程
WebSocket 的入门Demo!
该项目采用springboot+websocket 实现聊天小案例。 包括 springboot+websocket 实现服务端代码、html5 连接websocket客户端、springboot后台连接websockete客户端代码。
WebSocket搭建案例,集成SpringMVC
python-websocket爬虫案例
node+websocket入门实例,在谷歌测试成功。 1) 安装nodejs。 2) 执行cmd进入命令窗口,cd websocketdemo目录。 3) node server.js 4) 双击client.html显示页面。 5)输入信息,点击send。
在数据实效性要求更高的今天,实时通讯成为必然,webSocket为浏览器提供了解决方案,而现在基本所有浏览器都对其进行了支持,其...本案例针对webSocket的使用提供了完整案例,下载后便可以直接运行使用,为入门提供便利
使用websocket实现图文直播功能的一个demo,代码简单明了,是websocket应用入门的一个很好的例子
websocket服务代码,包括项目中的调用。成功运行,适合入门使用
WebSocket 入门
PHP实现WebSocket上课案例demo1-9教学案例运行即可用。
WebSocket入门教程(三)-- WebSocket实例:实时获取服务器内存使用情况, 详解:http://blog.csdn.net/u010136741/article/details/51581298
C#下使用WS的一个小案例,包含前后端简单测试
V3-websocket项目案例下载demo
WebSocket入门教程(三)-- WebSocket实例:实时获取服务器内存使用情况 服务端和客户端源码
unity websocket 案例 即时通讯案例,适用各个平台包括webgl unity聊天室 包含服务端与客户端
Graphql以及WebSocket入门资料和代码
此案例是一个简单是websocket运用的案例。 页面并没有华丽的样式,只是简单的说明此案例怎么运用。 在此实现类中,每一行代码中都有解释,对于新手初学websocket来说,真的是简单易懂。并且容易在这里扩展。 cpu监控...
websocket案例