使用Jetty搭建Java Websocket Server，实现图像传输

zzss · 发表于 2017-3-1 12:33:38

　　https://my.oschina.net/yushulx/blog/298140

How to Implement a Java WebSocket Server for Image Transmission with Jetty
　　创建一个从WebSocketHandler继承的类WSHandler：

import org.eclipse.jetty.websocket.api.Session;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketClose;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketConnect;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketError;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketMessage;
import org.eclipse.jetty.websocket.api.annotations.WebSocket;
import org.eclipse.jetty.websocket.server.WebSocketHandler;
import org.eclipse.jetty.websocket.servlet.WebSocketServletFactory;
@WebSocket
public class WSHandler extends WebSocketHandler {
@OnWebSocketClose
public void onClose(int statusCode, String reason) {
}
@OnWebSocketError
public void onError(Throwable t) {
}
@OnWebSocketConnect
public void onConnect(Session session) {
}
@OnWebSocketMessage
public void onMessage(String message) {
}
@Override
public void configure(WebSocketServletFactory factory) {
      // TODO Auto-generated method stub
      factory.register(WSHandler.class);
}
}
　　设置一个端口和Handler，启动Server：

public static void main(String[] args) throws Exception {
Server server = new Server(2014);
server.setHandler(new WSHandler());
server.setStopTimeout(0);
server.start();
server.join();
}
JavaScript客户端
　　写一个简单的测试。
　　Index.htm:

<!DOCTYPE html>
<html>
<body>
      <script src="websocket.js"></script>
</body>
</html>
　　Websocket.js:

var ws = new WebSocket("ws://127.0.0.1:2014/");
ws.onopen = function() {
alert("Opened");
ws.send("I'm client");
};
ws.onmessage = function (evt) {
};
ws.onclose = function() {
alert("Closed");
};
ws.onerror = function(err) {
alert("Error: " + err);
};
图像传输
　　功能：

　　从网页中主动获取图像

　　服务端推送图像到网页中

代码修改
　　从网页中获取服务端数据。
　　在index.htm中添加一个按钮元素和一个图片元素：

<!DOCTYPE html>
<html>
<body>
      <h1>WebSocket Image Display</h1>
      <input type="button" id="button" value="image" ><br>
      <img id="image"></<img>
      <script src="websocket.js"></script>
</body>
</html>
　　在Websocket.js中添加下面的代码：

ws.binaryType = "arraybuffer";
var button = document.getElementById("button");
button.onclick = function() {
ws.send("image"); // send the fetch request
};
ws.onmessage = function (evt) { // display the image
var bytes = new Uint8Array(evt.data);
var data = "";
var len = bytes.byteLength;
for (var i = 0; i < len; ++i) {
      data += String.fromCharCode(bytes);
}
var img = document.getElementById("image");
img.src = "data:image/png;base64,"+window.btoa(data);
};
　　服务端收到消息之后，发送图片：

public void onMessage(String message) {
      System.out.println("Message: " + message);
      if (message.equals("image")) {
         System.out.println("session: " + mSession);
         if (mSession != null) {
            try {
                  File f = new File("image\\github.jpg");
                  BufferedImage bi = ImageIO.read(f);
                  ByteArrayOutputStream out = new ByteArrayOutputStream();
                  ImageIO.write(bi, "png", out);
                  ByteBuffer byteBuffer = ByteBuffer.wrap(out.toByteArray());
                  mSession.getRemote().sendBytes(byteBuffer);
                  out.close();
                  byteBuffer.clear();
            } catch (IOException e) {
                  e.printStackTrace();
            }
         }
      }
}
　　从服务端发送数据到客户端。
　　在服务端的UI上添加两个按钮，一个用来加载本地图片，一个用来发送图片：

package com.ui;
import java.awt.BorderLayout;
import java.awt.Toolkit;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.image.BufferedImage;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import javax.imageio.ImageIO;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;
import javax.swing.filechooser.FileNameExtensionFilter;
import com.server.WSHandler;
import com.server.WebSocketServer;
public class UIMain extends JPanel
                           implements ActionListener {
private JButton mLoad, mSend;
private JFileChooser mFileChooser;
private JLabel mImage;
private byte[] mData;
private WebSocketServer mWebSocketServer;
public UIMain() {
      super(new BorderLayout());
      //Create a file chooser
      mFileChooser = new JFileChooser();
      FileNameExtensionFilter filter = new FileNameExtensionFilter(
            ".png.jpg", "png","jpg");
      mFileChooser.setFileFilter(filter);
      mLoad = new JButton("Load");
      mLoad.addActionListener(this);
      mSend = new JButton("Send");
      mSend.addActionListener(this);
      mSend.setEnabled(false);
      // button panel
      JPanel buttonPanel = new JPanel();
      buttonPanel.add(mLoad);
      buttonPanel.add(mSend);
      add(buttonPanel, BorderLayout.PAGE_START);
      // image panel
      JPanel imageViewer = new JPanel();
      mImage = new JLabel();
      mImage.setSize(480, 640);
      imageViewer.add(mImage);
      add(imageViewer, BorderLayout.CENTER);
      // WebSocketServer
      mWebSocketServer = new WebSocketServer();
      mWebSocketServer.start();
}
@Override
public void actionPerformed(ActionEvent e) {
}
private static void createAndShowGUI() {
      //Create and set up the window.
      JFrame frame = new JFrame("WebSocket Demo");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      //Add content to the window.
      frame.add(new UIMain());
      //Display the window.
      frame.pack();
      frame.setVisible(true);
      frame.setResizable(false);
      frame.setSize(480, 700);
      double width = Toolkit.getDefaultToolkit().getScreenSize().getWidth();
      double height = Toolkit.getDefaultToolkit().getScreenSize().getHeight();
      int frameWidth = frame.getWidth();
      int frameHeight = frame.getHeight();
      frame.setLocation((int)(width - frameWidth) / 2, (int)(height - frameHeight) / 2);
}
public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         @Override
         public void run() {
            UIManager.put("swing.boldMetal", Boolean.FALSE);
            createAndShowGUI();
         }
      });
}
}
　　为了防止UI阻塞，Websocket server需要在线程中创建：

package com.server;
import org.eclipse.jetty.server.Server;
public class WebSocketServer extends Thread{
@Override
public void run() {
      // TODO Auto-generated method stub
      super.run();
      try {
         Server server = new Server(2014);
         server.setHandler(new WSHandler());
         server.setStopTimeout(0);
         server.start();
         server.join();
      } catch (Exception e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
      }
}
}
　　在按钮事件中添加图片添加和发送功能：

public void sendImage(byte[] data) {
      if (mSession == null)
         return;
      try {
         ByteBuffer byteBuffer = ByteBuffer.wrap(data);
         mSession.getRemote().sendBytes(byteBuffer);
         byteBuffer.clear();
      } catch (IOException e) {
         e.printStackTrace();
      }
}
@Override
public void actionPerformed(ActionEvent e) {
      if (e.getSource() == mLoad) {
         int returnVal = mFileChooser.showOpenDialog(UIMain.this);
         if (returnVal == JFileChooser.APPROVE_OPTION) {
            File file = mFileChooser.getSelectedFile();
            // load image data to byte array
            try {
                  BufferedImage bi = ImageIO.read(file);
                  ByteArrayOutputStream out = new ByteArrayOutputStream();
                  ImageIO.write(bi, "png", out);
                  mData = out.toByteArray();
                  out.close();
            } catch (IOException exception) {
                  exception.printStackTrace();
            }
            mImage.setIcon(new ImageIcon(mData));
            mSend.setEnabled(true);
         }
      }
      else if (e.getSource() == mSend) {
         ArrayList<WSHandler> sessions = WSHandler.getAllSessions();
         for (WSHandler session : sessions) {
            session.sendImage(mData);
         }
         mSend.setEnabled(false);
      }
}

账号		自动登录	找回密码
密码			立即注册

VMware vcenter+vSphere 6.5 U2共享

【跟谁学】韩宇极简英语课-技术人员不得不

用Zabbix通过JMX方式监控weblogic

winhex数据恢复教程（非常巨大，内容丰富）

Symantec Backup Exec 2015 2016/2012 BE20

NetScaler VPX部署之：NetScaler Gateway调

zabbix3.4.1安装部署+微信推送信息+大屏显

[经验分享] 使用Jetty搭建Java Websocket Server，实现图像传输

扫码加入运维网微信交流群