how2j.cn

下载区
文件名 文件大小
bitcoin.rar 1m
javaee-api-7.0.jar 1m
步骤 1 : Tomcat版本   
步骤 2 : 先运行,看到效果,再学习   
步骤 3 : 首先创建动态Web项目   
步骤 4 : 复制jar   
步骤 5 : BitCoinServer   
步骤 6 : ServerManager   
步骤 7 : BitCoinDataCenter   
步骤 8 : index.jsp   

旧版本的Tomcat 不能支持WebSocket, 至少需要 7.0.47 以上才可以, 不确定的同学可以使用我的tomcat, 保证能用 可以跑websocket的tomcat 下载
步骤 2 :

先运行,看到效果,再学习

edit
以先下载右上角的可运行项目 bitcoin.rar,解压后导入到eclipse中,启动Tomcat,观察是否正常运行。确定可以运行,确定教程是可以跑得起来的,再学习下面的内容。

导入到Eclipse中并运行的办法请参考:导入动态Web项目到Eclipse中
如果用的IDEA, 请参考 如何使用IDEA打开Eclipse的动态Web项目

部署成功自后,测试地址

http://127.0.0.1:8080/bitcoin
步骤 3 :

首先创建动态Web项目

edit
菜单->File->New->Other->Web->Dynamic Web Project
首先创建动态Web项目
为了支持WebSocket,需要引入javaee.jar, 在右上角有,下载后放进WEB-INF/lib 目录下
复制jar
创建BitCoinServer类,用注解@ServerEndpoint("/ws/bitcoinServer")把它标记为一个WebSocket Server
ws/bitcoinServer 表示有通过这个地址访问该服务

OnOpen 表示有浏览器链接过来的时候被调用
OnClose 表示浏览器发出关闭请求的时候被调用
OnMessage 表示浏览器发消息的时候被调用
OnError 表示有错误发生,比如网络断开了等等

sendMessage 用于向浏览器回发消息

其中OnOpen发生的时候,即有链接过来的时候,会把当前WebSocket Server丢在ServerManager里管理起来,这样Tomcat才知道总共有哪些Server, 方便以后进行群发
package com.how2java.bitcoin; import java.io.IOException; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import javax.websocket.Session; import javax.websocket.server.ServerEndpoint; /** * @ServerEndpoint 注解是一个类层次的注解,它的功能主要是将目前的类定义成一个websocket服务器端, * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端 */ @ServerEndpoint("/ws/bitcoinServer") public class BitCoinServer { //与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; @OnOpen public void onOpen(Session session){ this.session = session; ServerManager.add(this); } public void sendMessage(String message) throws IOException{ this.session.getBasicRemote().sendText(message); } @OnClose public void onClose(){ ServerManager.remove(this); } @OnMessage public void onMessage(String message, Session session) { System.out.println("来自客户端的消息:" + message); } @OnError public void onError(Session session, Throwable error){ System.out.println("发生错误"); error.printStackTrace(); } }
ServerManager 中维护了一个线程安全的集合servers, 用于因为浏览器发起连接请求而创建的BitCoinServer.

broadCast 方法遍历这个集合,让每个Server向浏览器发消息。

其他方法很简单,不赘述
package com.how2java.bitcoin; import java.io.IOException; import java.util.ArrayList; import java.util.Collection; import java.util.Collections; public class ServerManager { private static Collection<BitCoinServer> servers = Collections.synchronizedCollection(new ArrayList<BitCoinServer>()); public static void broadCast(String msg){ for (BitCoinServer bitCoinServer : servers) { try { bitCoinServer.sendMessage(msg); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } public static int getTotal(){ return servers.size(); } public static void add(BitCoinServer server){ System.out.println("有新连接加入! 当前总连接数是:"+ servers.size()); servers.add(server); } public static void remove(BitCoinServer server){ System.out.println("有连接退出! 当前总连接数是:"+ servers.size()); servers.remove(server); } }
步骤 7 :

BitCoinDataCenter

edit
创建BitCoinDataCenter,使其继承HttpServlet.
标记为Servlet不是为了其被访问,而是为了便于伴随Tomcat一起启动,因为可以通过loadOnStartup一起就启动了
这个类实现了Runnable,可以在初始化方法里创建一个线程并调用之。
run 方法: 每个1-3秒就创建一个新价格,然后根据当前有多少人链接过来,进行调整价格,接着通过ServerManager广播出去。 这样浏览器就看到如如图所示的效果了
BitCoinDataCenter
package com.how2java.bitcoin; import java.util.Random; import javax.servlet.ServletConfig; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; @WebServlet(name="BitCoinDataCenter",urlPatterns = "/BitCoinDataCenter",loadOnStartup=1) //标记为Servlet不是为了其被访问,而是为了便于伴随Tomcat一起启动 public class BitCoinDataCenter extends HttpServlet implements Runnable{ public void init(ServletConfig config){ startup(); } public void startup(){ new Thread(this).start(); } @Override public void run() { int bitPrice = 100000; while(true){ //每隔1-3秒就产生一个新价格 int duration = 1000+new Random().nextInt(2000); try { Thread.sleep(duration); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } //新价格围绕100000左右50%波动 float random = 1+(float) (Math.random()-0.5); int newPrice = (int) (bitPrice*random); //查看的人越多,价格越高 int total = ServerManager.getTotal(); newPrice = newPrice*total; String messageFormat = "{\"price\":\"%d\",\"total\":%d}"; String message = String.format(messageFormat, newPrice,total); //广播出去 ServerManager.broadCast(message); } } }
在WebContent下创建index.jsp
主要代码讲解:
1. 判断浏览器是否支持WebSocket

if ('WebSocket' in window) {


2. 接受服务器回发的消息

websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
<%@ page language="java" pageEncoding="UTF-8" %> <!DOCTYPE html> <html> <head> <title>用WebSocket实时获知比特币价格</title> </head> <body> <div style="width:400px;margin:20px auto;border:1px solid lightgray;padding:20px;text-align:center;"> 当前比特币价格:¥<span style="color:#FF7519" id="price">10000</span> <div style="font-size:0.9em;margin-top:20px">查看的人数越多,价格越高, 当前总共 <span id="total">1</span> 个人在线</div> <div style="color:silver;font-size:0.8em;margin-top:20px">以上价格纯属虚构,如有雷同,so what?</div> </div> </body> <script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/bitcoin/ws/bitcoinServer"); //连接成功建立的回调方法 websocket.onopen = function () { websocket.send("客户端链接成功"); } //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //连接发生错误的回调方法 websocket.onerror = function () { alert("WebSocket连接发生错误"); }; //连接关闭的回调方法 websocket.onclose = function () { alert("WebSocket连接关闭"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } } else { alert('当前浏览器 Not support websocket') } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { var bitcoin = eval("("+innerHTML+")"); document.getElementById('price').innerHTML = bitcoin.price; document.getElementById('total').innerHTML = bitcoin.total; } //关闭WebSocket连接 function closeWebSocket() { websocket.close(); } </script> </html>


HOW2J公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2021-11-05 消息发送后回调问题
DeathNoteTel

sendMessage发送给浏览器请求后及时获取返回值,然后根据返回值处理接下来的事件,类似http请求,不过需求是要用websocket做到这一点。







回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2021-01-18 idea中地址无法访问?
BeBold

项目导入到idea中了,点击tomcat也启动了没报错,但是输入地址访问不到




1 个答案

归途
答案时间:2021-09-02
如果是报404,你看下idea配置的Tomcat是否配置了上下文/bitcoin



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2020-07-16 用非阻塞式的getAsyncRemote不是能更好一些吗?
2020-03-03 没看懂index.jsp和服务当中的请求关系返回关系
2019-11-25 这一次请求是怎么进入到线程里面开始跑的,没怎么看明白


提问太多,页面渲染太慢,为了加快渲染速度,本页最多只显示几条提问。还有 12 条以前的提问,请 点击查看

提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 工具和中间件-WebSocket-开发流程 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 578362961
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图