websocket图片数据传输

客户端:(图片转为base64)

var files = document.querySelector("#f").files
		
       if(files.length>0){
        var fileReader = new FileReader();

        fileReader.readAsDataURL(files[0])

        fileReader.onload=function (e) {

          var s = JSON.stringify({code:2,msg:prefix+customer+suffix + e.target.result});

           websocket.send(s)

服务端:

JSONObject jsonObject = JSONObject.parseObject(message.getPayload().toString());
 String mesg = jsonObject.getString("msg");

存在问题:base64字符过长,导致连接中断

@SpringBootApplication
@MapperScan("com.gzhw.grandbay.*.mapper")//使用MapperScan批量扫描所有的Mapper接口;
public class GrandbayApplication implements ServletContextInitializer {

    public static void main(String[] args) {
        SpringApplication.run(GrandbayApplication.class, args);
    }

    //添加websocket支持
//    @Bean
//    public ServerEndpointExporter serverEndpointExporter(){
//
//        return new ServerEndpointExporter();
//    }


    //设置websocket发送内容长度
    @Override
    public void onStartup(ServletContext servletContext) throws ServletException {

        servletContext.setInitParameter("org.apache.tomcat.websocket.textBufferSize","22428800");

    }
}

WebSocket协议是一种基于TCP的通信协议,可以实现实时双向通信。通过WebSocket协议可以输不同类型的数据,包括文本、二进制数据、图片等。 图片时,可以将图片以二进制数据的形式输。以下是一个基本的示例代码: ``` // 建立WebSocket连接 var socket = new WebSocket('ws://localhost:8080'); // 发送图片 var img = document.getElementById('image'); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); var dataURL = canvas.toDataURL('image/jpeg'); socket.send(dataURL); ``` 在服务端接收到图片数据后,可以将其转换为二进制数据,并保存为图片文件。以下是一个基本的示例代码: ``` // 接收数据 socket.onmessage = function(event) { var dataURL = event.data; var binary = atob(dataURL.split(',')[1]); var array = new Uint8Array(binary.length); for (var i = 0; i < binary.length; i++) { array[i] = binary.charCodeAt(i); } var blob = new Blob([array], {type: 'image/jpeg'}); // 保存为图片文件 var fs = require('fs'); fs.writeFile('image.jpg', blob, function(err) { if (err) throw err; console.log('Saved!'); }); }; ``` 需要注意的是,WebSocket输数据时需要考虑数据大小的限制,尤其是在输大型图片时。可以将图片切分成多个数据包进行输,并在服务端进行组装。同时,为了提高输效率,可以使用WebSocket压缩扩展进行压缩。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值