|
|
|
步骤 2 : 先运行，看到效果，再学习 步骤 3 : 首先创建动态Web项目 步骤 4 : 复制jar 步骤 5 : BitCoinServer 步骤 6 : ServerManager 步骤 7 : BitCoinDataCenter 步骤 8 : index.jsp
旧版本的Tomcat 不能支持WebSocket, 至少需要 7.0.47 以上才可以， 不确定的同学可以使用我的tomcat, 保证能用 可以跑websocket的tomcat 下载
以先下载右上角的可运行项目 bitcoin.rar，解压后导入到eclipse中，启动Tomcat，观察是否正常运行。确定可以运行，确定教程是可以跑得起来的，再学习下面的内容。
导入到Eclipse中并运行的办法请参考：导入动态Web项目到Eclipse中 如果用的IDEA, 请参考 如何使用IDEA打开Eclipse的动态Web项目 部署成功自后，测试地址 http://127.0.0.1:8080/bitcoin
菜单->File->New->Other->Web->Dynamic Web Project
为了支持WebSocket，需要引入javaee.jar, 在右上角有，下载后放进WEB-INF/lib 目录下
创建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);
}
}
创建BitCoinDataCenter，使其继承HttpServlet.
标记为Servlet不是为了其被访问，而是为了便于伴随Tomcat一起启动，因为可以通过loadOnStartup一起就启动了 这个类实现了Runnable，可以在初始化方法里创建一个线程并调用之。 run 方法： 每个1-3秒就创建一个新价格，然后根据当前有多少人链接过来，进行调整价格，接着通过ServerManager广播出去。 这样浏览器就看到如如图所示的效果了 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
消息发送后回调问题
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2021-01-18
idea中地址无法访问？
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-07-16
用非阻塞式的getAsyncRemote不是能更好一些吗？
2020-03-03
没看懂index.jsp和服务当中的请求关系返回关系
2019-11-25
这一次请求是怎么进入到线程里面开始跑的，没怎么看明白
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 12 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
|||||||||||||||
