jliang981
jliang981

webSocket应用：同步html5画布

本教程演示了如何创建简单 Web 应用程序，以在连接到单个服务器应用程序的客户端浏览器之间实现协作。当用户在客户端浏览器中的画布上绘制图形元素时，该元素将显示在所有已连接客户端的画布上。如何工作？当浏览器加载 Web 页时，客户端脚本将向应用程序服务器发送 WebSocket 握手请求。应用程序可以从会话中连接的客户端接受 JSON 和二进制消息，并将消息广播到连接的所有客户端。

在本教程中，您将创建一个 Web 应用程序，该应用程序使用用于 WebSocket 的 Java API (JSR 356)，从而支持浏览器客户端与应用程序服务器之间的双向通信。用于 WebSocket 的 Java API 支持创建 WebSocket Java 组件，启动和拦截 WebSocket 事件，以及创建和使用 WebSocket 文本和二进制消息。本教程还将演示如何使用用于 JSON 处理的 Java API (JSR 353) 以生成和使用 JSON。用于 WebSocket 的 Java API 和用于 JSON 处理的 Java API 是 Java EE 7 平台的组成部分 (JSR 342)。

应用程序中包含一个 WebSocket 端点和一些解码器和编码器接口、一个 Web 页和一些 JavaScript 文件，加载 Web 页时或从 Web 页中的窗体调用时，这些 JavaScript 文件将运行在客户端浏览器中。将应用程序部署到 GlassFish Server Open Source Edition 4（Java EE 7 技术的引用实现）。

注：本教程基于 Collaborative Whiteboard using WebSocket in GlassFish 4 - Text/JSON and Binary/ArrayBuffer Data Transfer (TOTD #189)（在 GlassFish 4 中使用 WebSocket 的协作白板 - 文本/JSON 和二进制/ArrayBuffer 数据传输 (TOTD #189)）博客帖子和其他可在 Arun Gupta 的博客上找到的博客条目。请确保访问此博客，并查看许多其他有关使用 WebSocket API 和 GlassFish 4 的优秀博客。

您也可以观看在 Web 应用程序中使用 WebSocket API 的视频。

教程练习

webSocket应用：同步html5画布_第1张图片
  • 创建 Web 应用程序项目
  • 创建 WebSocket 端点
    • 创建端点
    • 启动 WebSocket 会话
    • 测试端点
  • 创建白板
    • 添加画布
    • 创建 POJO
    • 创建坐标类
    • 生成 JSON 字符串
    • 实现编码器和解码器接口
    • 运行应用程序
  • 向端点发送二进制数据

要学习本教程，您需要具备以下软件和资源。

软件或资源 要求的版本
NetBeans IDE 7.3.1、7.4、8.0、Java EE 版本
Java 开发工具包 (JDK) 版本 7 或 8
GlassFish Server 开源版 4

注：GlassFish 4 随 NetBeans IDE 的 Java EE 下载包捆绑提供。

先决条件

本文档假定您具备以下技术的一些基本知识或编程经验：

  • Java 编程
  • JavaScript/HTML 编程
  • NetBeans IDE

在开始本教程之前，您可以先阅读下面这些文档。

  • NetBeans IDE 中的 Apache Maven 最佳做法
  • Chapter 1. Introducing Apache Maven（第 1 章. Apache Maven 简介，来自 Maven: The Complete Reference（Maven：完整参考））

您可以下载已完成项目的 zip 档案文件。

创建 Web 应用程序项目

本练习的目标是使用 IDE 中的 "New Project"（新建项目）向导创建一个 Web 应用程序项目。创建该项目时，将选择 Java EE 7 作为 Java EE 版本，并选择 GlassFish 4 作为应用程序服务器。GlassFish 4 是 Java EE 7 平台的引用实现。您必须具有支持注册到 IDE 的 Java EE 7 的应用程序服务器才能在本教程中创建应用程序。

  1. 从主菜单中选择 "File"（文件）> "New Project"（新建项目）（在 Windows 上为 Ctrl-Shift-N 组合键；在 Mac 上为 ⌘-Shift-N 组合键）。
  2. 从 "Maven" 类别中选择 "Web Application"（Web 应用程序）。单击 "Next"（下一步）。
  3. 键入 WhiteboardApp 作为项目名称并设置项目位置。
  4. 键入 org.sample 作为组 ID。单击 "Next"（下一步）。
  5. 选择 GlassFish Server 4.0 作为服务器。
  6. 将 Java EE 版本设置为 Java EE 7 Web。单击 "Finish"（完成）。
    webSocket应用：同步html5画布_第2张图片

单击 "Finish"（完成），此时 IDE 将创建项目并在 "Projects"（项目）窗口中打开该项目。

创建 WebSocket 端点

在此部分，您将创建一个 WebSocket 端点类和一个 JavaScript 文件。WebSocket 端点类包含一些在打开会话时运行的基本方法。然后，将创建一个 JavaScript 文件，在加载页面时该文件将启动与服务器的握手操作。随后将运行应用程序以测试连接是否成功。

有关使用 WebSocket API 和标注的更多信息，请参见 javax.websocket 包的概要。

创建端点

在此练习中，您将使用 IDE 中的向导帮助创建 WebSocket 端点类。

  1. 在 "Projects"（项目）窗口中右键单击 "Source Packages"（源包）节点，然后选择 "New"（新建）> "Other"（其他）。
  2. 在 "Web" 类别中选择 "WebSocket Endpoint"（WebSocket 端点）。单击 "Next"（下一步）。
  3. 键入 MyWhiteboard 作为类名。
  4. 在 "Package"（包）下拉列表中选择 org.sample.whiteboardapp。
  5. 键入 /whiteboardendpoint 作为 WebSocket URI。单击 "Finish"（完成）。
    webSocket应用：同步html5画布_第3张图片

    在单击 "Finish"（完成）后，IDE 将生成 WebSocket 端点类，并在源代码编辑器中打开文件。在编辑器中，您会看到 IDE 生成了一些属于 WebSocket API 一部分的标注。使用 @ServerEndpoint 标注类以将类标识为端点，并将 WebSocket URI 指定为该标注的参数。IDE 还生成了一个使用@OnMessage 标注的默认 onMessage 方法。每次客户端收到 WebSocket 消息时都会调用使用 @OnMessage 标注的方法。

    @ServerEndpoint("/whiteboardendpoint")
public class MyWhiteboard {

    @OnMessage
    public String onMessage(String message) {
        return null;
    }
    
}
  6. 将以下字段（粗体）添加到类中。 
    @ServerEndpoint("/whiteboardendpoint")
public class MyWhiteboard {
    private static Set peers = Collections.synchronizedSet(new HashSet());

    @OnMessage
    public String onMessage(String message) {
        return null;
    }
}
  7. 添加以下 onOpen 和 onClose 方法。 
        @OnOpen
    public void onOpen (Session peer) {
        peers.add(peer);
    }

    @OnClose
    public void onClose (Session peer) {
        peers.remove(peer);
    }

    您会看到 onOpen 和 onClose 方法使用 @OnOpen 和 @OnClose WebSocket API 标注进行了标注。打开 Web 套接字会话时会调用使用@OnOpen 进行标注的方法。在此示例中，标注的 onOpen 方法将浏览器客户端添加到当前会话中的对等组中，而 onClose 方法则从组中删除浏览器。

    使用源代码编辑器中的提示和代码完成可帮助生成这些方法。单击类声明旁边的左旁注中的提示图标（或者将插入光标置于类声明中并按下 Alt-Enter 组合键），然后在弹出菜单中选择相应方法。代码完成功能可帮助您对方法进行编码。

    webSocket应用：同步html5画布_第4张图片
  8. 在编辑器中右键单击，然后选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）。保存所做的更改。

    您将看到 javax.websocket 中类的 import 语句会添加到文件中。

端点现已创建。现在，您需要创建 JavaScript 文件以启动 WebSocket 会话。

启动 WebSocket 会话

在此练习中，您将创建一个 JavaScript 文件以启动 WebSocket 会话。浏览器客户端通过 TCP 与服务器进行 HTTP“握手”，从而加入会话。在 JavaScript 文件中，将指定端点的 wsURI 的名称并声明 WebSocket。wsURI URI 方案是 WebSocket 协议的一部分，指定应用程序端点的路径。

  1. 在项目窗口中，右键单击项目节点，然后选择 "New"（新建）> "Other"（其他）。
  2. 在 "New File"（新建文件）向导的 "Web" 类别中选择 "JavaScript File"（JavaScript 文件）。单击 "Next"（下一步）。
  3. 键入 websocket 作为 JavaScript 文件名。单击 "Finish"（完成）。
  4. 将以下内容添加到 JavaScript 文件中。 
    var wsUri = "ws://" + document.location.host + document.location.pathname + "whiteboardendpoint";
var websocket = new WebSocket(wsUri);

websocket.onerror = function(evt) { onError(evt) };

function onError(evt) {
    writeToScreen('ERROR: ' + evt.data);
}

    当浏览器加载 websocket.js 时，此脚本将启动与服务器的会话握手。

  5. 打开 index.html，然后将以下代码（粗体）添加到文件底部，以便在页面完成加载时加载 websocket.js。 
    
    
    Collaborative Whiteboard App

现在，您可以测试 WebSocket 端点是否正在工作，会话是否已启动，以及客户端是否已添加到会话中。

测试端点

在此练习中，您将向 JavaScript 文件中添加一些简单方法，以便在浏览器连接到端点时将 wsURI 输出到浏览器窗口。

  1. 将以下 
     标记（粗体）添加到 index.html 
    Collaborative Whiteboard App
  2. 将以下声明和方法添加到 websocket.js。保存所做的更改。 
    // For testing purposes
var output = document.getElementById("output");
websocket.onopen = function(evt) { onOpen(evt) };

function writeToScreen(message) {
    output.innerHTML += message + "
    ";
}

function onOpen() {
    writeToScreen("Connected to " + wsUri);
}
// End test functions

    当页面加载 JavaScript 时，这些函数将输出浏览器已连接到端点的消息。在确认端点正确执行之后，可以删除这些函数。

  3. 在 "Projects"（项目）窗口中右键单击项目，然后选择 "Run"（运行）。

运行应用程序时，IDE 将启动 GlassFish Server，然后构建并部署应用程序。索引页将在浏览器中打开，并且您将会在浏览器窗口中看到以下消息。

webSocket应用：同步html5画布_第5张图片

在浏览器窗口中，您会看到以下接受消息的端点：http://localhost:8080/WhiteboardApp/whiteboardendpoint

创建白板

在此部分，您将创建类和 JavaScript 文件以发送和接收 JSON 文本消息。您还将添加一个 HTML5 Canvas 元素（用于绘制和显示一些内容）和一个含有单选按钮的 HTML 

（用于指定画笔的形状和颜色）。

将画布添加到 Web 页中

在此练习中，将向默认索引页中添加 canvas 元素和 form 元素。窗体中的复选框确定画布的画笔属性。

  1. 在源代码编辑器中打开 index.html。
  2. 删除您添加的 
     标记以测试端点，并在开始的 body 标记之后添加以下  和  元素（粗体）。 
    Collaborative Whiteboard App
  3. 为 canvas 元素添加以下代码（粗体）。 
            
  4. 添加以下 
    5. 
            
    
                
                    
                  
    
     以添加单选按钮用于选择颜色和形状。保存所做的更改。 
            
    
            
    
                
                    
                
                
                    
    
                        
    

                            
    
                                Color
                                Red
                                Blue
                                Orange
                                Green
                            
    

                            
    
                                Shape
                                Square
                                Circle
                                 
                                 
                            
    

                        
    
                    
     
     画布上绘制的任何图形的形状、颜色和坐标都将转换为 JSON 结构中的字符串并作为消息发送至 WebSocket 端点。
      
    
   
     创建 POJO
     
   
     在此练习中，您将创建一个简单的 POJO。
     
   
       
    
    1. 右键单击项目节点，然后选择 "New"（新建）> "Java Class"（Java 类）。
      2.  
    
    2. 键入 Figure 作为类名，并从 "Package"（包）下拉列表中选择 org.sample.whiteboardapp。单击 "Finish"（完成）。
      3.  
    
    3. 在源代码编辑器中，添加以下内容（粗体）： 
      public class Figure {
    private JsonObject json;
}
       
       添加代码时，系统将提示您为 javax.json.JsonObject 添加 import 语句。如果未进行提示，请按下 Alt-Enter 组合键。
       
       有关 javax.json.JsonObject 的更多信息，请参见属于 Java EE 7 规范一部分的用于 JSON 处理的 Java API (JSR 353)。
       
      4.  
    
    4. 为 json 创建 getter 和 setter。 
       可以在 "Insert Code"（插入代码）弹出菜单中选择 getter 和 setter（在 Windows 上为 Alt-Ins；在 Mac 上为 Ctrl-I），以便打开 "Generate Getters and Setter"（生成 getter 和 setter）对话框。或者，也可以从主菜单中选择 "Source"（源）> "Insert Code"（插入代码）。
       webSocket应用：同步html5画布_第6张图片
      5.  
    
    5. 为 json 添加构造函数。 
          public Figure(JsonObject json) {
        this.json = json;
    }
       
       可以在 "Insert Code"（插入代码）弹出菜单中选择 "Constructor"（构造函数）（Ctrl-I 组合键）。
       webSocket应用：同步html5画布_第7张图片
      6.  
    
    6. 添加以下 toString 方法： 
          @Override
    public String toString() {
        StringWriter writer = new StringWriter();
        Json.createWriter(writer).write(json);
        return writer.toString();
    }
       
      7.  
    
    7. 在编辑器中右键单击，然后选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）。保存所做的更改。
      8.  
   
     
   
     创建坐标类
     
   
     现在，将为画布上绘制的图形坐标创建一个类。
     
   
       
    
    1. 右键单击项目节点，然后选择 "New"（新建）> "Java Class"（Java 类）。
      2.  
    
    2. 在 "New Java Class"（新建 Java 类）向导中，键入 Coordinates 作为类名，然后在 "Package"（包）下拉列表中选择org.sample.whiteboardapp。单击 "Finish"（完成）。
      3.  
    
    3. 在源代码编辑器中，添加以下代码。保存所做的更改。 
          private float x;
    private float y;

    public Coordinates() {
    }

    public Coordinates(float x, float y) {
        this.x = x;
        this.y = y;
    }

    public float getX() {
        return x;
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getY() {
        return y;
    }

    public void setY(float y) {
        this.y = y;
    }
                
       
      4.  
   
     
   
     该类只包含 x 和 y 坐标字段以及某些 getter 和 setter。
     
   
     生成 JSON 字符串
     
   
     在此练习中，您将创建一个 JavaScript 文件，该文件将 canvas 元素上绘制的图形的详细信息放入发送到 WebSocket 端点的 JSON 结构。
     
   
       
    
    1. 右键单击项目节点，然后选择 "New"（新建）> "JavaScript File"（JavaScript 文件）以打开 "New JavaScript File"（新建 JavaScript 文件）向导。
      2.  
    
    2. 键入 whiteboard 作为文件名。单击 "Finish"（完成）。 
       单击 "Finish"（完成）后，IDE 将创建空 JavaScript 文件并在编辑器中打开该文件。您可以在 "Projects"（项目）窗口中的 "Web Pages"（Web 页）节点下看到该新文件。
       
      3.  
    
    3. 添加以下代码以初始化画布并添加事件监听程序。 
      var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("click", defineImage, false);
       
       您可以看到当用户在 canvas 元素中单击时调用了 defineImage 方法。
       
      4.  
    
    4. 添加下面的 getCurrentPos、defineImage 和 drawImageText 方法以构造 JSON 结构并将其发送到端点 (sendText(json))。 
      function getCurrentPos(evt) {
    var rect = canvas.getBoundingClientRect();
    return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
            
function defineImage(evt) {
    var currentPos = getCurrentPos(evt);
    
    for (i = 0; i < document.inputForm.color.length; i++) {
        if (document.inputForm.color[i].checked) {
            var color = document.inputForm.color[i];
            break;
        }
    }
            
    for (i = 0; i < document.inputForm.shape.length; i++) {
        if (document.inputForm.shape[i].checked) {
            var shape = document.inputForm.shape[i];
            break;
        }
    }
    
    var json = JSON.stringify({
        "shape": shape.value,
        "color": color.value,
        "coords": {
            "x": currentPos.x,
            "y": currentPos.y
        }
    });
    drawImageText(json);
        sendText(json);
}

function drawImageText(image) {
    console.log("drawImageText");
    var json = JSON.parse(image);
    context.fillStyle = json.color;
    switch (json.shape) {
    case "circle":
        context.beginPath();
        context.arc(json.coords.x, json.coords.y, 5, 0, 2 * Math.PI, false);
        context.fill();
        break;
    case "square":
    default:
        context.fillRect(json.coords.x, json.coords.y, 10, 10);
        break;
    }
}
       
       发送的 JSON 结构将类似于以下内容：
       
      {
 "shape": "square",
 "color": "#FF0000",
 "coords": {
 "x": 31.59999942779541,
 "y": 49.91999053955078
 }
} 
       
       现在，您需要添加 sendText(json) 方法以使用 websocket.send() 发送 JSON 字符串。
       
      5.  
    
    5. 在编辑器中打开 websocket.js，然后添加以下方法，用于将 JSON 发送到端点，以及在从端点收到消息时绘制图像。 
      websocket.onmessage = function(evt) { onMessage(evt) };

function sendText(json) {
    console.log("sending text: " + json);
    websocket.send(json);
}
                
function onMessage(evt) {
    console.log("received: " + evt.data);
    drawImageText(evt.data);
}
       
       注：可以删除已添加到 websocket.js 中的代码以测试端点。
       
      6.  
    
    6. 将以下行（粗体）添加到 index.html 的底部以加载 whiteboard.js。

实现编码器和解码器接口

在此练习中，将创建用于实现解码器和编码器接口的类，以便将 Web 套接字消息 (JSON) 解码为 POJO 类 Figure，并将 Figure 编码为 JSON 字符串以发送到端点。

有关更多详细信息，请参见技术文章用于 WebSocket 的 Java API (JSR 356) 中有关消息类型以及编码器和解码器的部分。

  1. 右键单击项目节点，然后选择 "New"（新建）> "Java Class"（Java 类）。
  2. 键入 FigureEncoder 作为类名，并在 "Package"（包）下拉列表中选择 org.sample.whiteboardapp。单击 "Finish"（完成）。
  3. 在源代码编辑器中，通过添加以下代码（粗体）来实现 WebSocket 编码器接口： 
                
public class FigureEncoder implements Encoder.Text
     {
    
}
  4. 为 javax.websocket.Encoder 添加 import 语句并实现抽象方法。

    将光标放在类声明中，按下 Alt-Enter 组合键，然后从弹出菜单中选择 Implement all abstract methods（实现所有抽象方法）。

  5. 通过进行以下更改（粗体）修改生成的抽象方法。保存所做的更改。 
        @Override
    public String encode(Figure figure) throws EncodeException {
        return figure.getJson().toString();
    }

    @Override
    public void init(EndpointConfig ec) {
        System.out.println("init");
    }

    @Override
    public void destroy() {
        System.out.println("destroy");
    }
  6. 右键单击项目节点，然后选择 "New"（新建）> "Java Class"（Java 类）。
  7. 键入 FigureDecoder 作为类名，并在 "Package"（包）下拉列表中选择 org.sample.whiteboardapp。单击 "Finish"（完成）。
  8. 在源代码编辑器中，通过添加以下代码（粗体）来实现 WebSocket 解码器接口： 
                
public class FigureDecoder implements Decoder.Text
     {
    
}
  9. 为 javax.websocket.Decoder 添加 import 语句并实现抽象方法。
  10. 对生成的抽象方法进行以下更改（粗体）。 
        @Override
    public Figure decode(String string) throws DecodeException {
        JsonObject jsonObject = Json.createReader(new StringReader(string)).readObject();
        return  new Figure(jsonObject);
    }

    @Override
    public boolean willDecode(String string) {
        try {
            Json.createReader(new StringReader(string)).readObject();
            return true;
        } catch (JsonException ex) {
            ex.printStackTrace();
            return false;
        }
    
    }

    @Override
    public void init(EndpointConfig ec) {
        System.out.println("init");
    }

    @Override
    public void destroy() {
        System.out.println("destroy");
    }
  11. 修复导入并保存更改。

现在，您需要修改 MyWhiteboard.java 以指定编码器和解码器。

运行应用程序

您现在几乎准备好运行应用程序了。在此练习中，您将修改 WebSocket 端点类以便为 JSON 字符串指定编码器和解码器，并添加方法以便在收到消息时将 JSON 字符串发送到已连接的客户端。

  1. 在编辑器中打开 MyWhiteboard.java。
  2. 修改 @ServerEndpoint 标注以便为端点指定编码器和解码器。请注意，您需要显式为端点的名称指定 value 参数。 
    @ServerEndpoint(value="/whiteboardendpoint", encoders = {FigureEncoder.class}, decoders = {FigureDecoder.class})
  3. 删除默认情况下生成的 onMessage 方法。
  4. 添加以下 broadcastFigure 方法并使用 @OnMessage 标注该方法。 
        @OnMessage
    public void broadcastFigure(Figure figure, Session session) throws IOException, EncodeException {
        System.out.println("broadcastFigure: " + figure);
        for (Session peer : peers) {
            if (!peer.equals(session)) {
                peer.getBasicRemote().sendObject(figure);
            }
        }
    }
  5. 在编辑器中右键单击，然后选择 "Fix Imports"（修复导入）（Alt-Shift-I 组合键；在 Mac 上为 ⌘-Shift-I 组合键）。保存所做的更改。
  6. 在 "Projects"（项目）窗口中右键单击项目，然后选择 "Run"（运行）。

当您单击 "Run"（运行）时，IDE 会将浏览器窗口打开到 http://localhost:8080/WhiteboardApp/。

注：您可能需要从应用程序服务器取消部署以前的应用程序，或者强制在浏览器中重新加载此页。

如果查看浏览器消息，您会看到每次在画布中单击时，都会通过 JSON 将字符串发送到端点。

webSocket应用：同步html5画布_第8张图片

如果将另一个浏览器打开到 http://localhost:8080/WhiteboardApp/，您会看到每次在一个浏览器的画布中单击时，都会在另一个浏览器的画布中重新生成新的圆形或方形。

webSocket应用：同步html5画布_第9张图片

向端点发送二进制数据

应用程序现在可以处理字符串并通过 JSON 将字符串发送到端点，然后将字符串发送到已连接的客户端。在此部分，您将修改 JavaScript 文件以发送和接收二进制数据。

要将二进制数据发送到端点，您需要将 WebSocket 的 binaryType 属性设置为 arraybuffer。这可确保通过 ArrayBuffer 完成使用 WebSocket 的任何二进制数据传输。由 whiteboard.js 中的 defineImageBinary 方法执行二进制数据转换。

  1. 打开 websocket.js，然后添加以下代码以将 WebSocket 的 binaryType 属性设置为 arraybuffer。 
    websocket.binaryType = "arraybuffer";
  2. 添加以下方法以将二进制数据发送到端点。 
    function sendBinary(bytes) {
    console.log("sending binary: " + Object.prototype.toString.call(bytes));
    websocket.send(bytes);
}
  3. 修改 onMessage 方法以添加以下代码（粗体），从而选择该方法用于根据传入消息中的数据类型更新画布。 
    function onMessage(evt) {
    console.log("received: " + evt.data);
    if (typeof evt.data == "string") {
        drawImageText(evt.data);
    } else {
        drawImageBinary(evt.data);
    }
}

    如果收到包含二进制数据的消息，则会调用 drawImageBinary 方法。

  4. 打开 whiteboard.js 并添加以下方法。在解析传入的二进制数据之后，会调用 drawImageBinary 方法以更新画布。defineImageBinary 方法用于将画布快照准备为二进制数据。 
    function drawImageBinary(blob) {
    var bytes = new Uint8Array(blob);
//    console.log('drawImageBinary (bytes.length): ' + bytes.length);
    
    var imageData = context.createImageData(canvas.width, canvas.height);
    
    for (var i=8; i 
     现在，当您想要以 ArrayBuffer 类型生成二进制数据并将其发送到端点时，需要添加一种方法来调用 defineImageBinary。
  5. 打开 index.html，然后修改  元素以将以下行添加到窗体中的表中。 
     新行包含 "Send Snapshot"（发送快照）按钮，用于将画布的二进制快照发送到已连接的对等方。单击此按钮时，将调用 whiteboard.js 中的defineImageBinary 方法。
  6. 打开 MyWhiteboard.java，然后添加以下方法，用于在端点收到包含二进制数据的消息时将二进制数据发送到对等方。 
    @OnMessage
public void broadcastSnapshot(ByteBuffer data, Session session) throws IOException {
    System.out.println("broadcastBinary: " + data);
    for (Session peer : peers) {
        if (!peer.equals(session)) {
            peer.getBasicRemote().sendBinary(data);
        }
    }
}
     
     注：需要为 java.nio.ByteBuffer 添加 import 语句。
     
    7.  可以修改应用程序以使用户能够停止向端点发送数据。默认情况下，只要对等方打开了页面就会立即连接所有这些对等方，并将数据从浏览器发送到连接的所有对等方。可以添加简单条件，以便只有在选择了此选项时才会将数据发送到端点。这并不影响接收数据。仍会从端点接收数据。
     
   
       
    
    1. 修改 whiteboard.js 中的 defineImage 方法以添加以下代码（粗体）。 
              drawImageText(json);
    if (document.getElementById("instant").checked) {
        sendText(json);
    }
}
       
       检查元素的 ID 是否为 checked 的条件代码
       
      2.  
    
    2. 打开 index.html，然后修改 
    
     
    
     
     
     

    
                   
    
   
   
  
     元素以向窗体中添加复选框。 
     取消选中 "Online"（联机）复选框时不会发送数据，但客户端仍将从端点接收数据。
     如果添加 "Send Snapshot"（发送快照）按钮和 "Online"（联机）复选框并再次运行应用程序，则您将会在索引页中看到新元素。如果打开另一个浏览器并取消选中 "Online"（联机）按钮，您会看到在画布中单击时不会将 JSON 消息发送到端点。
    webSocket应用：同步html5画布_第10张图片
     如果单击 "Send Snapshot"（发送快照），则二进制数据将发送到端点并广播到已连接的客户端。
     
     转载网址：https://netbeans.org/kb/docs/javaee/maven-websocketapi_zh_CN.html
    
                    
                
    
        
    你可能感兴趣的:(Socket,web,js)
    
        
    
            
    
                
      
                    
    • element实现动态路由+面包屑
                        软件技术NINI
vue案例vue.js前端
                        
      el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
      
                    
      • 
                    
    • 理解Gunicorn：Python WSGI服务器的基石
                        范范0825
ipythonlinux运维
                        
      理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico
      
                    
      • 
                    
    • 高级编程--XML+socket练习题
                        masa010
java开发语言
                        
      1.北京华北2114.8万人上海华东2,500万人广州华南1292.68万人成都华西1417万人（1）使用dom4j将信息存入xml中（2）读取信息，并打印控制台（3）添加一个city节点与子节点（4）使用socketTCP协议编写服务端与客户端，客户端输入城市ID，服务器响应相应城市信息（5）使用socketTCP协议编写服务端与客户端，客户端要求用户输入city对象，服务端接收并使用dom4j
      
                    
      • 
                    
    • C#中使用split分割字符串
                        互联网打工人no1
c#
                        
      1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
      
                    
      • 
                    
    • Google earth studio 简介
                        陟彼高冈yu
旅游
                        
      GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G
      
                    
      • 
                    
    • PHP环境搭建详细教程
                        好看资源平台
前端php
                        
      PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这
      
                    
      • 
                    
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
                        STU学生网页设计
网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
                        
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
      
                    
      • 
                    
    • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
                        若博豆
java算法华为javascript
                        
      华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
      
                    
      • 
                    
    • 数组去重
                        好奇的猫猫猫

                        
      整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
      
                    
      • 
                    
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
                        二挡起步
web前端期末大作业javascripthtmlcss旅游风景
                        
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
      
                    
      • 
                    
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
                        二挡起步
web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
                        
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
      
                    
      • 
                    
    • git - Webhook让部署自动化
                        大猪大猪

                        
      我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时
      
                    
      • 
                    
    • 【JS】执行时长(100分) |思路参考+代码解析（C++）
                        l939035548
JS算法数据结构c++
                        
      题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
      
                    
      • 
                    
    • webpack图片等资源的处理
                        dmengmeng

                        
      需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p
      
                    
      • 
                    
    • node.js学习
                        小猿L
node.jsnode.js学习vim
                        
      node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
      
                    
      • 
                    
    • docker
                        igotyback
eureka云原生
                        
      Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
      
                    
      • 
                    
    • 在Ubuntu中编译含有JSON的文件出现报错
                        芝麻糊76
Linuxkill_buglinuxubuntujson
                        
      在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
      
                    
      • 
                    
    • Xinference如何注册自定义模型
                        玩人工智能的辣条哥
人工智能AI大模型Xinference
                        
      环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
      
                    
      • 
                    
    • 网络编程基础
                        记得开心一点啊
网络
                        
      目录♫什么是网络编程♫Socket套接字♪什么是Socket套接字♪数据报套接字♪流套接字♫数据报套接字通信模型♪数据报套接字通讯模型♪DatagramSocket♪DatagramPacket♪实现UDP的服务端代码♪实现UDP的客户端代码♫流套接字通信模型♪流套接字通讯模型♪ServerSocket♪Socket♪实现TCP的服务端代码♪实现TCP的客户端代码♫什么是网络编程网络编程，指网络上
      
                    
      • 
                    
    • 「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验
                        张风捷特烈
iderust开发语言后端
                        
      theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www
      
                    
      • 
                    
    • Python神器！WEB自动化测试集成工具 DrissionPage
                        亚丁号
python开发语言
                        
      一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
      
                    
      • 
                    
    • Java爬虫框架（一）--架构设计
                        狼图腾-狼之传说
java框架java任务html解析器存储电子商务
                        
      一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
      
                    
      • 
                    
    • Java：爬虫框架
                        dingcho
Javajava爬虫
                        
      一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
      
                    
      • 
                    
    • MongoDB知识概括
                        GeorgeLin98
持久层mongodb
                        
      MongoDB知识概括MongoDB相关概念单机部署基本常用命令索引-IndexSpirngDataMongoDB集成副本集分片集群安全认证MongoDB相关概念业务应用场景：传统的关系型数据库（如MySQL），在数据操作的“三高”需求以及应对Web2.0的网站需求面前，显得力不从心。解释：“三高”需求：①Highperformance-对数据库高并发读写的需求。②HugeStorage-对海量数
      
                    
      • 
                    
    • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net
                        佛一脚
errorreactmongodb数据库
                        
      背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
      
                    
      • 
                    
    • Python实现下载当前年份的谷歌影像
                        sand&wich
python开发语言
                        
      在GIS项目和地图应用中，获取最新的地理影像数据是非常重要的。本文将介绍如何使用Python代码从Google地图自动下载当前年份的影像数据，并将其保存为高分辨率的TIFF格式文件。这个过程涉及地理坐标转换、多线程下载和图像处理。关键功能该脚本的核心功能包括：坐标转换：支持WGS-84与WebMercator投影之间转换，以及处理中国GCJ-02偏移。自动化下载：多线程下载地图瓦片，提高效率。图像
      
                    
      • 
                    
    • Vue( ElementUI入门、vue-cli安装)
                        m0_l5z
elementuivue.js
                        
      一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
      
                    
      • 
                    
    • Spring MVC 全面指南：从入门到精通的详细解析
                        一杯梅子酱
技术栈学习springmvcjava
                        
      引言：SpringMVC，作为Spring框架的一个重要模块，为构建Web应用提供了强大的功能和灵活性。无论是初学者还是有一定经验的开发者，掌握SpringMVC都将显著提升你的Web开发技能。本文旨在为初学者提供一个全面且易于理解的学习路径，通过详细的知识点分析和实际案例，帮助你快速上手SpringMVC，让学习过程既深刻又高效。一、SpringMVC简介1.1什么是SpringMVC？Spri
      
                    
      • 
                    
    • Spring Boot中实现跨域请求
                        BABA8891
springboot后端java
                        
      在SpringBoot中实现跨域请求（CORS，Cross-OriginResourceSharing）可以通过多种方式，以下是几种常见的方法：1.使用@CrossOrigin注解在SpringBoot中，你可以在控制器或者具体的请求处理方法上使用@CrossOrigin注解来允许跨域请求。在控制器上应用：importorg.springframework.web.bind.annotation.
      
                    
      • 
                    
    • WebMagic：强大的Java爬虫框架解析与实战
                        Aaron_945
Javajava爬虫开发语言
                        
      文章目录引言官网链接WebMagic原理概述基础使用1.添加依赖2.编写PageProcessor高级使用1.自定义Pipeline2.分布式抓取优点结论引言在大数据时代，网络爬虫作为数据收集的重要工具，扮演着不可或缺的角色。Java作为一门广泛使用的编程语言，在爬虫开发领域也有其独特的优势。WebMagic是一个开源的Java爬虫框架，它提供了简单灵活的API，支持多线程、分布式抓取，以及丰富的
      
                    
      • 
                                
    • 多线程编程之存钱与取钱
                                    周凡杨
javathread多线程存钱取钱
                                    
        
生活费问题是这样的：学生每月都需要生活费，家长一次预存一段时间的生活费，家长和学生使用统一的一个帐号，在学生每次取帐号中一部分钱，直到帐号中没钱时 通知家长存钱，而家长看到帐户还有钱则不存钱，直到帐户没钱时才存钱。   
问题分析：首先问题中有三个实体，学生、家长、银行账户，所以设计程序时就要设计三个类。其中银行账户只有一个，学生和家长操作的是同一个银行账户，学生的行为是
      
                                
      • 
                                
    • java中数组与List相互转换的方法
                                    征客丶
JavaScriptjavajsonp
                                    
      1.List转换成为数组。（这里的List是实体是ArrayList) 
　　调用ArrayList的toArray方法。 
　　toArray 
　　public T[] toArray(T[] a)返回一个按照正确的顺序包含此列表中所有元素的数组；返回数组的运行时类型就是指定数组的运行时类型。如果列表能放入指定的数组，则返回放入此列表元素的数组。否则，将根据指定数组的运行时类型和此列表的大小分
      
                                
      • 
                                
    • Shell 流程控制
                                    daizj
流程控制if elsewhilecaseshell
                                    
      Shell 流程控制 
和Java、PHP等语言不一样，sh的流程控制不可为空，如(以下为PHP流程控制写法)： 
<?php
if(isset($_GET["q"])){
    search(q);}else{// 不做任何事情} 
在sh/bash里可不能这么写，如果else分支没有语句执行，就不要写这个else，就像这样  if else if 
if 语句语
      
                                
      • 
                                
    • Linux服务器新手操作之二
                                    周凡杨
Linux 简单 操作
                                    
      1.利用关键字搜寻Man Pages    man -k keyword  其中-k 是选项，keyword是要搜寻的关键字 如果现在想使用whoami命令，但是只记住了前3个字符who，就可以使用 man -k who来搜寻关键字who的man命令       [haself@HA5-DZ26 ~]$ man -k 
      
                                
      • 
                                
    • socket聊天室之服务器搭建
                                    朱辉辉33
socket
                                    
      因为我们做的是聊天室，所以会有多个客户端，每个客户端我们用一个线程去实现，通过搭建一个服务器来实现从每个客户端来读取信息和发送信息。 
   我们先写客户端的线程。 
public class ChatSocket extends Thread{ 
 Socket socket; 
 
 public ChatSocket(Socket socket){ 
 this.sock
      
                                
      • 
                                
    • 利用finereport建设保险公司决策分析系统的思路和方法
                                    老A不折腾
finereport金融保险分析系统报表系统项目开发
                                    
      决策分析系统呈现的是数据页面，也就是俗称的报表，报表与报表间、数据与数据间都按照一定的逻辑设定，是业务人员查看、分析数据的平台，更是辅助领导们运营决策的平台。底层数据决定上层分析，所以建设决策分析系统一般包括数据层处理（数据仓库建设）。 
  
项目背景介绍 
通常，保险公司信息化程度很高，基本上都有业务处理系统（像集团业务处理系统、老业务处理系统、个人代理人系统等）、数据服务系统（通过
      
                                
      • 
                                
    • 始终要页面在ifream的最顶层
                                    林鹤霄

                                    
      index.jsp中有ifream，但是session消失后要让login.jsp始终显示到ifream的最顶层。。。始终没搞定，后来反复琢磨之后，得到了解决办法，在这儿给大家分享下。。 
index.jsp--->主要是加了颜色的那一句 
<html> 
<iframe name="top" ></iframe> 
<ifram
      
                                
      • 
                                
    • MySQL binlog恢复数据
                                    aigo
mysql
                                    
      1，先确保my.ini已经配置了binlog： 
  
# binlog
log_bin = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.log
log_bin_index = D:/mysql-5.6.21-winx64/log/binlog/mysql-bin.index
log_error = D:/mysql-5.6.21-win
      
                                
      • 
                                
    • OCX打成CBA包并实现自动安装与自动升级
                                    alxw4616
ocxcab
                                    
      近来手上有个项目,需要使用ocx控件 
(ocx是什么? 
http://baike.baidu.com/view/393671.htm) 
在生产过程中我遇到了如下问题. 
1. 如何让 ocx 自动安装? 
    a) 如何签名? 
    b) 如何打包? 
    c) 如何安装到指定目录? 
2.
      
                                
      • 
                                
    • Hashmap队列和PriorityQueue队列的应用
                                    百合不是茶
Hashmap队列PriorityQueue队列
                                    
        
HashMap队列已经是学过了的,但是最近在用的时候不是很熟悉,刚刚重新看以一次, 
  HashMap是K,v键 ,值   
  
put()添加元素 
  
  
 //下面试HashMap去掉重复的 
package com.hashMapandPriorityQueue;

import java.util.H
      
                                
      • 
                                
    • JDK1.5 returnvalue实例
                                    bijian1013
javathreadjava多线程returnvalue
                                    
      Callable接口： 
返回结果并且可能抛出异常的任务。实现者定义了一个不带任何参数的叫做 call 的方法。 
Callable 接口类似于 Runnable，两者都是为那些其实例可能被另一个线程执行的类设计的。但是 Runnable 不会返回结果，并且无法抛出经过检查的异常。 
        
ExecutorService接口方
      
                                
      • 
                                
    • angularjs指令中动态编译的方法(适用于有异步请求的情况) 内嵌指令无效
                                    bijian1013
JavaScriptAngularJS
                                    
              在directive的link中有一个$http请求，当请求完成后根据返回的值动态做element.append('......');这个操作，能显示没问题，可问题是我动态组的HTML里面有ng-click，发现显示出来的内容根本不执行ng-click绑定的方法！ 
    
      
                                
      • 
                                
    • 【Java范型二】Java范型详解之extend限定范型参数的类型
                                    bit1129
extend
                                    
      在第一篇中，定义范型类时，使用如下的方式： 
  
public class Generics<M, S, N> {
   //M,S,N是范型参数
} 
 这种方式定义的范型类有两个基本的问题： 
  
1. 范型参数定义的实例字段，如private M m = null;由于M的类型在运行时才能确定，那么我们在类的方法中，无法使用m，这跟定义pri
      
                                
      • 
                                
    • 【HBase十三】HBase知识点总结
                                    bit1129
hbase
                                    
      1. 数据从MemStore flush到磁盘的触发条件有哪些？ 
   a.显式调用flush，比如flush 'mytable' 
   b.MemStore中的数据容量超过flush的指定容量，hbase.hregion.memstore.flush.size,默认值是64M 2. Region的构成是怎么样？ 
1个Region由若干个Store组成
      
                                
      • 
                                
    • 服务器被DDOS攻击防御的SHELL脚本
                                    ronin47

                                    
      mkdir /root/bin
vi /root/bin/dropip.sh
#!/bin/bash/bin/netstat -na|grep ESTABLISHED|awk ‘{print $5}’|awk -F:‘{print $1}’|sort|uniq -c|sort -rn|head -10|grep -v -E ’192.168|127.0′|awk ‘{if($2!=null&a
      
                                
      • 
                                
    • java程序员生存手册-craps 游戏-一个简单的游戏
                                    bylijinnan
java
                                    
      
import java.util.Random;


public class CrapsGame {

	/**
	 *
	 *一个简单的赌*博游戏，游戏规则如下：
	 *玩家掷两个骰子，点数为1到6，如果第一次点数和为7或11，则玩家胜，
	 *如果点数和为2、3或12，则玩家输，
	 *如果和为其它点数，则记录第一次的点数和，然后继续掷骰，直至点数和等于第一次掷出的点
      
                                
      • 
                                
    • TOMCAT启动提示NB: JAVA_HOME should point to a JDK not a JRE解决
                                    开窍的石头
JAVA_HOME
                                    
      当tomcat是解压的时候，用eclipse启动正常，点击startup.bat的时候启动报错; 
报错如下： 
  The JAVA_HOME environment variable is not defined correctly 
This environment variable is needed to run this program 
NB: JAVA_HOME shou
      
                                
      • 
                                
    • [操作系统内核]操作系统与互联网
                                    comsci
操作系统
                                    
       
 
     我首先申明：我这里所说的问题并不是针对哪个厂商的，仅仅是描述我对操作系统技术的一些看法 
 
 
      操作系统是一种与硬件层关系非常密切的系统软件，按理说，这种系统软件应该是由设计CPU和硬件板卡的厂商开发的，和软件公司没有直接的关系，也就是说，操作系统应该由做硬件的厂商来设计和开发
      
                                
      • 
                                
    • 富文本框ckeditor_4.4.7 文本框的简单使用 支持IE11
                                    cuityang
富文本框
                                    
      <html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>知识库内容编辑</tit
      
                                
      • 
                                
    • Property null not found
                                    darrenzhu
datagridFlexAdvancedpropery null
                                    
      When you got error message like "Property null not found ***", try to fix it by the following way: 
 
1)if you are using AdvancedDatagrid, make sure you only update the data in the data prov
      
                                
      • 
                                
    • MySQl数据库字符串替换函数使用
                                    dcj3sjt126com
mysql函数替换
                                    
      需求：需要将数据表中一个字段的值里面的所有的  .   替换成  _   
原来的数据是  site.title  site.keywords  .... 
替换后要为     site_title  site_keywords 
  
使用的SQL语句如下： 
  
updat
      
                                
      • 
                                
    • mac上终端起动MySQL的方法
                                    dcj3sjt126com
mysqlmac
                                    
      首先去官网下载: http://www.mysql.com/downloads/ 
我下载了5.6.11的dmg然后安装,安装完成之后..如果要用终端去玩SQL.那么一开始要输入很长的:/usr/local/mysql/bin/mysql 
这不方便啊,好想像windows下的cmd里面一样输入mysql -uroot -p1这样...上网查了下..可以实现滴. 
打开终端,输入: 
1
      
                                
      • 
                                
    • Gson使用一（Gson）
                                    eksliang
jsongson
                                    
      转载请出自出处：http://eksliang.iteye.com/blog/2175401 一.概述 
从结构上看Json，所有的数据（data）最终都可以分解成三种类型： 
 
 第一种类型是标量（scalar），也就是一个单独的字符串（string）或数字（numbers），比如"ickes"这个字符串。 
 第二种类型是序列（sequence），又叫做数组（array）
      
                                
      • 
                                
    • android点滴4
                                    gundumw100
android
                                    
      Android 47个小知识 
 
http://www.open-open.com/lib/view/open1422676091314.html 
 
 Android实用代码七段（一） 
 
http://www.cnblogs.com/over140/archive/2012/09/26/2611999.html 
 
http://www.cnblogs.com/over140/arch
      
                                
      • 
                                
    • JavaWeb之JSP基本语法
                                    ihuning
javaweb
                                    
        
目录 
  
JSP模版元素  
JSP表达式  
JSP脚本片断  
EL表达式  
JSP注释  
特殊字符序列的转义处理  
如何查找JSP页面中的错误 
  
JSP模版元素  
  
JSP页面中的静态HTML内容称之为JSP模版元素，在静态的HTML内容之中可以嵌套JSP
      
                                
      • 
                                
    • App Extension编程指南（iOS8/OS X v10.10）中文版
                                    啸笑天
ext
                                    
        
  
  
  
 当iOS 8.0和OS X v10.10发布后，一个全新的概念出现在我们眼前，那就是应用扩展。顾名思义，应用扩展允许开发者扩展应用的自定义功能和内容，能够让用户在使用其他app时使用该项功能。你可以开发一个应用扩展来执行某些特定的任务，用户使用该扩展后就可以在多个上下文环境中执行该任务。比如说，你提供了一个能让用户把内容分
      
                                
      • 
                                
    • SQLServer实现无限级树结构
                                    macroli
oraclesqlSQL Server
                                    
       
 表结构如下： 
 数据库id path titlesort 排序 1 0 首页 0 2 0,1 新闻 1 3 0,2 JAVA 2 4 0,3 JSP 3 5 0,2,3 业界动态 2 6 0,2,3 国内新闻 1 
 创建一个存储过程来实现，如果要在页面上使用可以设置一个返回变量将至传过去 
   
 create procedure test
as
begin
decla
      
                                
      • 
                                
    • Css居中div，Css居中img，Css居中文本，Css垂直居中div
                                    qiaolevip
众观千象学习永无止境每天进步一点点css
                                    
      /**********Css居中Div**********/
div.center {
  width: 100px;
  margin: 0 auto;
}
/**********Css居中img**********/
img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}


      
                                
      • 
                                
    • Oracle 常用操作(实用)
                                    吃猫的鱼
oracle
                                    
       
  SQL>select text from all_source where owner=user and name=upper('&plsql_name');
  SQL>select * from user_ind_columns where index_name=upper('&index_name');  将表记录恢复到指定时间段以前
      
                                
      • 
                                
    • iOS中使用RSA对数据进行加密解密
                                    witcheryne
iosrsaiPhoneobjective c
                                    
        
RSA算法是一种非对称加密算法,常被用于加密数据传输.如果配合上数字摘要算法, 也可以用于文件签名. 
本文将讨论如何在iOS中使用RSA传输加密数据. 本文环境 
 
 mac os  
 openssl-1.0.1j, openssl需要使用1.x版本, 推荐使用[homebrew](http://brew.sh/)安装. 
 Java 8 
 RSA基本原理 
RS
      
                                
      • 
                
    
            
    
        
    
    
    
     
    
    Online