使用Jetty搭建Java Websocket Server,实现图像传输
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[i]);
    }
    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);
        }
    }
使用Jetty搭建Java Websocket Server,实现图像传输的更多相关文章
- Caused by: java.lang.IllegalStateException: javax.websocket.server.ServerContainer not available
		
java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.co ...
 - java websocket学习
		
引言: websocket,webservice傻傻分不清楚,都觉得是很高深的东西,理解中的webservice是一种协议,通信协议,类似http协议的那种,比如使用webservice协议调后台接口 ...
 - GIN+GORILLA=A GOLANG WEBSOCKET SERVER
		
鉴于聊天已然成为大部分app的基础功能,而大部分app用户基数有没有辣么大,常用的聊天server架构如xmpp或者消息队列实现之类的用起来还挺麻烦的,有比较难跟网页端做交互,加之H5标准落地,所以w ...
 - 【IntelliJ IDEA新手入门】IDEA如何快速搭建Java开发环境
		
作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢? 今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境?那就 ...
 - IDEA如何快速搭建Java开发环境
		
作为IntelliJ IDEA mac新手,IDEA如何快速搭建Java开发环境呢?今天小编就给大家带来了IntelliJ IDEA mac使用教程,想知道IDEA如何快速搭建Java开发环境? 全局 ...
 - java WebSocket Demo
		
1.IDEA创建Module,结构如图(Tomcat8.0) 2.引入jar包:javax.websocket-api.jar 3.新建WebSocketTest类 import javax.webs ...
 - 在 Ubuntu 13.10 中搭建Java开发环境 - 懒人版
		
本文记录我在Ubuntu 13.10中搭建Java开发环境. 本文环境: Ubuntu 13.10 x64运行在Win7下的VMware Workstation 10中. 1. 安装JDK与JRE s ...
 - SSD Cloud Hosting - Linode的配置和部署,搭建Java环境
		
0.发牢骚 前一个月在淘宝购买了个Jsp空间,挺便宜的,才38元/年.部署了程序,然后ALIMAMA验证网站,一直提示验证失败.最后找卖家,他说可能是因为空间太慢,照他的推荐换了最好的空间,138元/ ...
 - RedHat7/Windows7搭建JAVA开发环境(Eclipse)
		
RedHat7搭建JAVA开发环境 安装JAVA # yum install java 安装Tomcat # yum install tomcat 确认Tomcat版本 # tomcat versio ...
 
随机推荐
- Google 分布式关系型数据库 F1
			
F1是Google开发的分布式关系型数据库,主要服务于Google的广告系统.Google的广告系统以前使用MySQL,广告系统的用户经常需要使用复杂的query和join操作,这就需要设计shard ...
 - Nginx 和 IIS 实现动静分离【转载】
			
前段时间,搞Nginx+IIS的负载均衡,想了解的朋友,可以看这篇文章:<nginx 和 IIS 实现负载均衡>,然后也就顺便研究了Nginx + IIS 实现动静分离.所以,一起总结出来 ...
 - JSP注释及scriptlet  <%局部%><%!全局%><%=输出%>
			
显示注释: <!--注释内容-->> 隐式注释: 1. // 2./* */ 3. <%-- 注释内容--%> <!-- 这个注释客户端就可以看见 --> & ...
 - Head First - 01.策略模式(Strategy Pattern)
			
策略模式定义了算法族,分别封装起来,让它们之间可以互相替换,此模式让算法的变化独立于使用算法的客户. 当你需要给朋友留下深刻印象,或是影响关键主管的决策时,请使用“这个”定义! 设计原则: 1.找出 ...
 - 状压dp  Codeforces Beta Round #8 C
			
http://codeforces.com/contest/8/problem/C 题目大意:给你一个坐标系,给你一个人的目前的坐标(该坐标也是垃圾桶的坐标),再给你n个垃圾的坐标,这个人要捡完所有的 ...
 - Error configuring application listener of class 报错 解决
			
Error configuring application listener of class 次错误是由于工程没有贬义Class文件造成的,clean一下编译一下工程,clean之后进入项目目录查看 ...
 - 网址组成与特殊ip小解
			
网址 https://www.baidu.com:8010/a/html/a.html?tn=monline_3_dg#part1 注解: 网址= 当前url协议+域名+端口号+路径名+参数+hash ...
 - spring 分散配置
			
Spring简化了加载资源文件的配置,可以通过<context:property-placeholder去加载,这个元素的写法如下: <context:property-placehold ...
 - JQuery中$.ajax()方法参数详解 (20
			
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
 - UITabBarItem's appearance
			
1.我们知道,用tabBarController创建出来默认的tabBar似这个样子滴... -----------------我是图片分割线----------------------------- ...