`
haoningabc
  • 浏览: 1478046 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

websocket传传图片

JavaScriptwebsocket 
阅读更多
参考[url]http://www.adobe.com/devnet/archive/html5/articles/real-time-data-exchange-in-html5-with-websockets.html
[/url]
server端还是用tomcat7的方式
客户端 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">    
<html>    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
<title>Insert title here</title>    
</head>    
  
<body onload="startServer()">  
<canvas id="myCanvas" width="400px" height="500px">myCanvas</canvas>  
<canvas id="yourCanvas" width="400px" height="500px">yourCanvas</canvas>  
<div id="chatdiv" width="400px" height="500px">chatdiv</div> 

<input type="text" id="textMessage" size="20" />    
<input type="button" onclick="sendMessage()" value="Send">   
<input type="button" onclick="sendphoto()" value="sendphoto">    
</body> 
<script type="text/javascript">
	var myCanvas=document.getElementById("myCanvas");  
	var context=myCanvas.getContext('2d');  
	var imagewidth=myCanvas.width;
    var imageheight=myCanvas.height;
	var yourCanvas=document.getElementById("yourCanvas");  
	var context2=yourCanvas.getContext('2d'); 
	var image = new Image();  
	image.src = "haoba.jpg";  
	image.onload = function(){  
	    context.drawImage(image,0,0);  
	    var imgData=context.getImageData(50,50,200,200);  
	    context2.putImageData(imgData,10,260);  
	    //ctx.putImageData(imgData,200,260,50,50,100,100);  
	};  
 
    var ws = null;    
    function startServer() {    
        var url = "ws://192.168.137.27:8081/hao/msg";    
        if ('WebSocket' in window) {    
            ws = new WebSocket(url);    
        } else if ('MozWebSocket' in window) {    
            ws = new MozWebSocket(url);    
        } else {    
            alert('浏览器不支持');    
            return;  
        }    
        ws.binaryType = "arraybuffer";
        ws.onopen = function() {    
            alert('Opened!');    
        };    
        // 收到服务器发送的文本消息, event.data表示文本内容    
        ws.onmessage = function(event) { 
        	if(event.data instanceof ArrayBuffer){
		        var bytearray = new Uint8Array(event.data);
		        var tempcanvas = yourCanvas;
	            tempcanvas.height = imageheight;
	            tempcanvas.width = imagewidth;
		        var tempcontext = tempcanvas.getContext('2d');
		        var imgdata = tempcontext.getImageData(0,0,imagewidth,imageheight);
		        var imgdatalen = imgdata.data.length;
		        for(var i=8;i<imgdatalen;i++){
		            imgdata.data[i] = bytearray[i];
		        }
		        tempcontext.putImageData(imgdata,0,0);
		        var img = document.createElement('img');
		            img.height = imageheight;
		            img.width = imagewidth;
		            img.src = tempcanvas.toDataURL();
		        var chatdiv=document.getElementById("chatdiv");
		        chatdiv.appendChild(img);
		        chatdiv.innerHTML = chatdiv.innerHTML + "<br />";
		    }else{
		    	alert('Receive message: ' + event.data);    
		    }
            
        };    
        ws.onclose = function() {    
          alert('Closed!');    
        }   
        ws.onerror = function(err){
        	alert(err);
        }; 
	}    
    //发送信息    
    function sendMessage(){    
        var textMessage=document.getElementById("textMessage").value;    
            
        if(ws!=null&&textMessage!=""){    
            ws.send(textMessage);    
        }    
    }    
    
    function sendphoto(){
	    imagedata = context.getImageData(0, 0, imagewidth,imageheight);
	    var canvaspixelarray = imagedata.data;
	    var canvaspixellen = canvaspixelarray.length;
	    var bytearray = new Uint8Array(canvaspixellen);
	    for (var i=0;i<canvaspixellen;++i) {
	        bytearray[i] = canvaspixelarray[i];
	    }
	    ws.send(bytearray.buffer);
	    context.fillStyle = '#000000';
	    context.fillRect(0, 0, imagewidth,imageheight);    
	}
</script>  
</html>

tomcat7下的服务端
HelloWorldWebSocketServlet.java 
package com.hao;


import java.io.DataInputStream;
import java.io.IOException;
import java.io.PrintWriter;
import java.net.Socket;
import java.net.UnknownHostException;
import java.nio.ByteBuffer;
import java.nio.CharBuffer;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.Map;
import java.util.Random;

import javax.servlet.http.HttpServletRequest;

import org.apache.catalina.websocket.MessageInbound;
import org.apache.catalina.websocket.StreamInbound;
import org.apache.catalina.websocket.WebSocketServlet;
import org.apache.catalina.websocket.WsOutbound;

public class HelloWorldWebSocketServlet extends WebSocketServlet {
	public static Map<String,MyMessageInbound> mmiList  = new HashMap<String,MyMessageInbound>();

	protected StreamInbound createWebSocketInbound(String subProtocol,
			HttpServletRequest arg1) {
		return new MyMessageInbound();
	}
	public int getUserCount(){
		return mmiList.size();
	}
	private class MyMessageInbound extends MessageInbound {
		WsOutbound myoutbound;
		String mykey;
		@Override
		public void onOpen(WsOutbound outbound) {
			try {
				System.out.println("Open Client.");
				this.myoutbound = outbound;
				mykey =""+System.currentTimeMillis();;
				mmiList.put(mykey, this);
				System.out.println("mmiList size:"+mmiList.size());
				outbound.writeTextMessage(CharBuffer.wrap("open "+mykey));
			} catch (IOException e) {
				e.printStackTrace();
			}
		}

		@Override
		public void onClose(int status) {
			System.out.println("Close Client.");
			//mmiList.remove(this);
			mmiList.remove(mykey);
		}

		@Override
		protected void onBinaryMessage(ByteBuffer arg0) throws IOException {
			System.out.println("websocket-----onBinaryMessage:"+arg0.toString());
			for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
					System.out.println(entry.getKey()+"--bin---");
					MyMessageInbound mmib = (MyMessageInbound) entry.getValue(); 
					mmib.myoutbound.writeBinaryMessage(arg0);
					mmib.myoutbound.flush();
			}
		}
		
		@Override
		protected void onTextMessage(CharBuffer message) throws IOException {
			System.out.println("onText--->" + message.toString());
			String[] msgarray= message.toString().split(",");
			for (Map.Entry<String, MyMessageInbound> entry : mmiList.entrySet()) {
				System.out.println(entry.getKey()+"-----");
				  MyMessageInbound mmib = (MyMessageInbound) entry.getValue(); 
				  CharBuffer buffer = CharBuffer.wrap(message);
				  System.out.println(buffer);
	              mmib.myoutbound.writeTextMessage(buffer);
	              mmib.myoutbound.flush();
			}
		}
	}

	
}

tomcat的配置文件： 
<?xml version="1.0" encoding="ISO-8859-1"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
                      http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
  version="3.0"
  metadata-complete="true">
<servlet>
      <servlet-name>haomsg</servlet-name>
      <servlet-class>com.hao.HelloWorldWebSocketServlet</servlet-class>
    </servlet>
    <servlet-mapping>
      <servlet-name>haomsg</servlet-name>
      <url-pattern>/hao/msg</url-pattern>
    </servlet-mapping>
</web-app>
分享到：
| angularjs使用include后双向绑定失败的解 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    WebSocket传视频方法总结

    WebSocket传视频方法总结

    websocket 推送图像 Js显示

    通过WebSocket实现服务器主动推送 图像数据通过Base64编码，定义为Json格式传输 前端收到Json数据后 将图像还原 代码有任何问题可以和我联系 liangji@csu.ac.cn 一起学习，此外也可以看我的博客 博客有更详细的介绍...

    基于websocket的网页即时通讯(可传附件图片涂鸦、最小化弹窗).NET C# 20180614

    在“基于websocket的网页即时通讯(可传附件图片涂鸦、最小化弹窗).NET C# 20180614”项目中，开发者使用了.NET框架和C#语言构建了一个WinForm服务端，利用SuperWebSocket库来实现WebSocket服务。SuperWebSocket是一...

    C# WinForm 通过WebSocket 实现文件传输示例

    在本文中，我们将深入探讨如何使用C# WinForm和WebSocket技术实现文件传输。WebSocket是一种在客户端和服务器之间建立持久连接的协议，它极大地优化了实时通信，尤其适用于需要频繁交互和低延迟的应用，如文件传输。...

    WebSocket传输图片-附件资源

    WebSocket传输图片-附件资源

    基于websocket的网页即时通讯(可传附件图片涂鸦、最小化弹窗).NET

    用户可以选择本地图片，UEditor会通过WebSocket将图片数据发送到服务器。服务器端接收到图片数据后，可以将其保存到指定的目录，并返回一个文件URL给客户端。客户端收到URL后，可以在编辑器中显示图片。 涂鸦功能是...

    spring boot websocket , mongoDBd存文件 图片服务器

    在本文中，我们将深入探讨如何使用Spring Boot构建一个WebSocket服务器，并与MongoDB集成，特别是利用GridFS存储文件，包括图片。此外，我们还将讨论非GridFS的文件存储方式及其限制。 首先，Spring Boot是一个简化...

    android中基于socket方式的文件上传

    在Android开发中，文件上传是一项常见的任务，尤其是图片或视频等多媒体内容的分享。当涉及到通过网络进行文件传输时，Socket通信是一种基础且灵活的方法。本篇将详细讲解如何在Android应用中实现基于Socket方式的...

    声音传书.epub

    how to send sound file

    C++OpenCv利用Socket通讯类传输图片或者视频

    在IT领域，网络通信是至关重要的，特别是在实时数据传输如图片和视频的场景下。C++结合OpenCV库，可以实现高效、稳定的图像和视频处理，并通过Socket进行网络通信。以下将详细介绍如何利用C++和OpenCV通过Socket来...

    HTML5实现文件断点续传的方法

    BLOB（Binary Large Object）是用于存储二进制数据的类型，例如图片、音频、视频或者任何其他非文本格式的数据。通过`slice()`方法，我们可以指定开始和结束位置，将文件分割成我们需要的大小块。 在前端，我们首先...

    图片动态传输.rar

    5. **WebSocket**：对于需要持续更新的图片流，WebSocket协议可以提供双向通信，建立持久连接，减少建立和关闭连接的开销。 6. **图片压缩优化**：在传输过程中，可能需要对图片进行动态压缩，根据网络状况和设备...

    java 图片异步上传

    Spring MVC中，我们可以定义一个Controller方法，使用`@RequestParam`注解接收前端传来的图片数据。后端可能需要进行权限验证、大小限制、格式检查等操作。 4. **多线程处理**：为了提高服务器处理效率，可以将图片...

    e4a与电脑易语言服务端通信

    2. WebSocket：对于需要实时双向通信的应用，WebSocket是一个理想的选择。e4a支持WebSocket客户端，可以建立持久连接，与服务端保持长链接，实现实时数据传输。电脑易语言服务端同样可以搭建WebSocket服务器，处理...

    coding.zip

    6. 表情包和传图功能：表情包功能一般通过预设的一系列表情图片URL或者编码实现，用户选择表情后，JavaScript将对应的URL或编码发送给服务器，服务器再将对应的图片发送给其他用户。图片分享功能更复杂，用户上传...

    Android 仿飞鸽传书源码

    例如，使用高效的图片加载库（如Glide或Picasso）避免内存泄漏，使用懒加载策略减少初次启动时的数据加载。 综上所述，"Android 仿飞鸽传书源码"涵盖了Android开发中的许多核心知识点，从基础的UI设计到复杂的网络...

    Android项目飞鸽传书.rar

    飞鸽传书可能使用SQLite数据库存储本地聊天记录，同时利用WebSocket或HTTP长轮询等技术实现实时通信，确保新消息的即时同步。 3. **网络编程**：Android的网络编程主要通过HttpURLConnection、OkHttp或者Volley等库...

    多(单)图片上传

    - **断点续传**：对于大文件，支持断点续传能提高上传稳定性。 - **CDN分发**：利用内容分发网络（CDN）加速图片加载，改善用户体验。 6. **文件名列表`piccl图片上传`**： 这可能是某个具体项目或工具的名称，...

    Android 群英传

    网络编程是现代移动应用不可或缺的一部分，书中有专门章节讲解如何使用Android的HttpURLConnection、OkHttp或者Retrofit进行网络请求，处理JSON数据，以及实现WebSocket通信。同时，还会涉及如何处理网络异常，保证...

    c# 用Base64实现文件上传

    下面就来演示一下，C#语言配合js，如何实现图片的base64格式上传与解析保存。  首先看一下前台是如何将文件读取到的，请先看如下js代码： var DataforUp = ; var reader = new FileReader(); //声明文件读取对象 ...

Magicbox
Global site tag (gtag.js) - Google Analytics