Android App开发即时通信中通过SocketIO在客户端与服务端间传输文本和图片的讲解及实战(超详细 附源码)

news2025/8/4 4:41:28

需要源码和服务端代码请点赞关注收藏后评论区留下QQ~~~

一、通过SocketIO传输文本消息

虽然HTTP协议能够满足多数常见的接口交互,但是他属于短连接,每次调用完就自动断开连接,并且HTTP协议区分了服务端和客户端,双方的通信过程是单向的,只有客户端可以请求服务端,服务端无法主动向客户端推送信息,所以它不适合点对点的即时通信功能

即时通信技术需要满足两方面的要求。一是长连接,以便在两台设备之间持续通信,避免频繁的连接断开操作,这样非常浪费资源。二是支持双向交流,既允许A设备主动向B设备发送消息,又允许B设备主动向A设备发送消息。

可是Java 的Socket编程比较繁琐,不仅要自行编写线程通信与IO处理的代码,还要自己定义数据包的内部格式以及解编码,为此出现了第三方的Socket通信框架SocketIO,该框架提供了服务端和客户端的依赖包,大大简化了Socket通信的开发工作量

客户端集成SocketIO添加下面一行依赖即可

    implementation 'io.socket:socket.io-client:1.0.0'

接着使用SocketIO提供的Socket工具完成消息的收发操作 常用方法如下

connect 建立Socket连接

connected 判断是否连接上Socket

emit 向服务器提交指定事件消息

on  开始监听服务端推送的事件消息

off 取消监听消息

disconnect 断开Socket连接

close 关闭Socket连接

 双向Socket流程如下

图中实线表示代码的调用顺序,虚线表示异步的事件触发

 然后确保服务端的SocketServer正在允许(IDEA)环境

服务端会做出应答 

 

 代码如下

Java类

package com.example.network;

import android.os.Bundle;
import android.text.TextUtils;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.example.network.constant.NetConst;
import com.example.network.util.DateUtil;
import com.example.network.util.SocketUtil;

import java.net.URISyntaxException;

import io.socket.client.IO;
import io.socket.client.Socket;

public class SocketioTextActivity extends AppCompatActivity {
    private static final String TAG = "SocketioTextActivity";
    private EditText et_input; // 声明一个编辑框对象
    private TextView tv_response; // 声明一个文本视图对象
    private Socket mSocket; // 声明一个套接字对象

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_socketio_text);
        et_input = findViewById(R.id.et_input);
        tv_response = findViewById(R.id.tv_response);
        findViewById(R.id.btn_send).setOnClickListener(v -> {
            String content = et_input.getText().toString();
            if (TextUtils.isEmpty(content)) {
                Toast.makeText(this, "请输入聊天消息", Toast.LENGTH_SHORT).show();
                return;
            }
            mSocket.emit("send_text", content); // 往Socket服务器发送文本消息
        });
        initSocket(); // 初始化套接字
    }

    // 初始化套接字
    private void initSocket() {
        // 检查能否连上Socket服务器
        SocketUtil.checkSocketAvailable(this, NetConst.BASE_IP, NetConst.BASE_PORT);
        try {
            String uri = String.format("http://%s:%d/", NetConst.BASE_IP, NetConst.BASE_PORT);
            mSocket = IO.socket(uri); // 创建指定地址和端口的套接字实例
        } catch (URISyntaxException e) {
            throw new RuntimeException(e);
        }
        mSocket.connect(); // 建立Socket连接
        // 等待接收传来的文本消息
        mSocket.on("receive_text", (args) -> {
            String desc = String.format("%s 收到服务端消息:%s",
                    DateUtil.getNowTime(), (String) args[0]);
            runOnUiThread(() -> tv_response.setText(desc));
        });
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mSocket.off("receive_text"); // 取消接收传来的文本消息
        if (mSocket.connected()) { // 已经连上Socket服务器
            mSocket.disconnect(); // 断开Socket连接
        }
        mSocket.close(); // 关闭Socket连接
    }
}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <EditText
        android:id="@+id/et_input"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/editext_selector"
        android:hint="请输入聊天内容"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <Button
        android:id="@+id/btn_send"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="发送文本消息"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/tv_response"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/black"
        android:textSize="17sp" />
</LinearLayout>

二、通过SocketIO传输图片消息

倘若让SocketIO实时传输图片比较困难,因为SocketIO不支持直接传输二进制数据,使得位图对象的字节数据无法作为emit方法的输入参数。所以可以考虑利用JSON对象封装图像信息,把图像的字节数据编码成字符串保存起来

鉴于JSON格式允许容纳多个 字段,同时图片有可能很大,因此建议将图片拆开分段运输,每段标明本次的分段序号、分段长度以及分段数据,由接收方在收到后重新拼接成完整的图像

效果如下

 代码如下

Java类

package com.example.network;

import android.content.Intent;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.net.Uri;
import android.os.Bundle;
import android.util.Base64;
import android.util.Log;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.example.network.bean.ImagePart;
import com.example.network.constant.NetConst;
import com.example.network.util.BitmapUtil;
import com.example.network.util.DateUtil;
import com.example.network.util.SocketUtil;
import com.google.gson.Gson;

import org.json.JSONObject;

import java.io.ByteArrayOutputStream;
import java.net.URISyntaxException;

import io.socket.client.IO;
import io.socket.client.Socket;

public class SocketioImageActivity extends AppCompatActivity {
    private static final String TAG = "SocketioImageActivity";
    private ImageView iv_request; // 声明一个图像视图对象
    private ImageView iv_response; // 声明一个图像视图对象
    private TextView tv_response; // 声明一个文本视图对象
    private int CHOOSE_CODE = 3; // 只在相册挑选图片的请求码
    private String mFileName; // 图片名称
    private Bitmap mBitmap; // 位图对象
    private Socket mSocket; // 声明一个套接字对象

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_socketio_image);
        iv_request = findViewById(R.id.iv_request);
        iv_response = findViewById(R.id.iv_response);
        tv_response = findViewById(R.id.tv_response);
        findViewById(R.id.btn_choose).setOnClickListener(v -> {
            // 创建一个内容获取动作的意图(准备跳到系统相册)
            Intent albumIntent = new Intent(Intent.ACTION_GET_CONTENT);
            albumIntent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, false); // 是否允许多选
            albumIntent.setType("image/*"); // 类型为图像
            startActivityForResult(albumIntent, CHOOSE_CODE); // 打开系统相册
        });
        findViewById(R.id.btn_send).setOnClickListener(v -> {
            if (mBitmap == null) {
                Toast.makeText(this, "请先选择图片文件", Toast.LENGTH_SHORT).show();
                return;
            }
            sendImage(); // 分段传输图片数据
        });
        initSocket(); // 初始化套接字
    }

    // 初始化套接字
    private void initSocket() {
        // 检查能否连上Socket服务器
        SocketUtil.checkSocketAvailable(this, NetConst.BASE_IP, NetConst.BASE_PORT);
        try {
            String uri = String.format("http://%s:%d/", NetConst.BASE_IP, NetConst.BASE_PORT);
            mSocket = IO.socket(uri); // 创建指定地址和端口的套接字实例
        } catch (URISyntaxException e) {
            throw new RuntimeException(e);
        }
        mSocket.connect(); // 建立Socket连接
        // 等待接收传来的图片数据
        mSocket.on("receive_image", (args) -> receiveImage(args));
    }

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
        super.onActivityResult(requestCode, resultCode, intent);
        if (resultCode == RESULT_OK && requestCode == CHOOSE_CODE) { // 从相册返回
            if (intent.getData() != null) { // 从相册选择一张照片
                Uri uri = intent.getData(); // 获得已选择照片的路径对象
                String path = uri.toString();
                mFileName = path.substring(path.lastIndexOf("/")+1);
                // 根据指定图片的uri,获得自动缩小后的位图对象
                mBitmap = BitmapUtil.getAutoZoomImage(this, uri);
                iv_request.setImageBitmap(mBitmap); // 设置图像视图的位图对象
            }
        }
    }

    private int mBlock = 50*1024; // 每段的数据包大小
    // 分段传输图片数据
    private void sendImage() {
        Log.d(TAG, "sendImage");
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        // 把位图数据压缩到字节数组输出流
        mBitmap.compress(Bitmap.CompressFormat.JPEG, 80, baos);
        byte[] bytes = baos.toByteArray();
        int count = bytes.length/mBlock + 1;
        Log.d(TAG, "sendImage length="+bytes.length+", count="+count);
        // 下面把图片数据经过BASE64编码后发给Socket服务器
        for (int i=0; i<count; i++) {
            Log.d(TAG, "sendImage i="+i);
            String encodeData = "";
            if (i == count-1) { // 是最后一段图像数据
                int remain = bytes.length % mBlock;
                byte[] temp = new byte[remain];
                System.arraycopy(bytes, i*mBlock, temp, 0, remain);
                encodeData = Base64.encodeToString(temp, Base64.DEFAULT);
            } else { // 不是最后一段图像数据
                byte[] temp = new byte[mBlock];
                System.arraycopy(bytes, i*mBlock, temp, 0, mBlock);
                encodeData = Base64.encodeToString(temp, Base64.DEFAULT);
            }
            // 往Socket服务器发送本段的图片数据
            ImagePart part = new ImagePart(mFileName, encodeData, i, bytes.length);
            SocketUtil.emit(mSocket, "send_image", part); // 向服务器提交图像数据
        }
    }

    private String mLastFile; // 上次的文件名
    private int mReceiveCount; // 接收包的数量
    private byte[] mReceiveData; // 收到的字节数组
    // 接收对方传来的图片数据
    private void receiveImage(Object... args) {
        JSONObject json = (JSONObject) args[0];
        ImagePart part = new Gson().fromJson(json.toString(), ImagePart.class);
        if (!part.getName().equals(mLastFile)) { // 与上次文件名不同,表示开始接收新文件
            mLastFile = part.getName();
            mReceiveCount = 0;
            mReceiveData = new byte[part.getLength()];
        }
        mReceiveCount++;
        // 把接收到的图片数据通过BASE64解码为字节数组
        byte[] temp = Base64.decode(part.getData(), Base64.DEFAULT);
        System.arraycopy(temp, 0, mReceiveData, part.getSeq()*mBlock, temp.length);
        // 所有数据包都接收完毕
        if (mReceiveCount >= part.getLength()/mBlock+1) {
            // 从字节数组中解码得到位图对象
            Bitmap bitmap = BitmapFactory.decodeByteArray(mReceiveData, 0, mReceiveData.length);
            String desc = String.format("%s 收到服务端消息:%s", DateUtil.getNowTime(), part.getName());
            runOnUiThread(() -> { // 回到主线程展示图片与描述文字
                tv_response.setText(desc);
                iv_response.setImageBitmap(bitmap);
            });
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mSocket.off("receive_image"); // 取消接收传来的图片数据
        if (mSocket.connected()) { // 已经连上Socket服务器
            mSocket.disconnect(); // 断开Socket连接
        }
        mSocket.close(); // 关闭Socket连接
    }

}

XML文件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_choose"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="请选择待发送的图片"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/iv_request"
        android:layout_width="match_parent"
        android:layout_height="180dp" />

    <Button
        android:id="@+id/btn_send"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="发送图片消息"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/tv_response"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:textColor="@color/black"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/iv_response"
        android:layout_width="match_parent"
        android:layout_height="180dp" />
</LinearLayout>

创作不易 觉得有帮助请点赞关注收藏~~~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/34652.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习知识经验分享之三:基于卷积神经网络的经典目标检测算法

文章目录前言一、一阶段目标检测算法1.YOLO系列算法2.SSD检测算法3. RetinaNet检测算法二、两阶段目标检测算法1.Faster R-CNN检测算法2.Mask R-CNN检测算法3.Cascade R-CNN检测算法总结前言 本系列文章将对机器学习知识进行分享总结。便于大家从理论层面了解人工智能基础原理…

软件被人后台篡改了收款码属于入侵吗?

最近很多做平台的小伙伴&#xff0c;碰到了同样的问题&#xff0c;就是软件程序后台被恶意篡改收款二维码 这个问题出现在平台主身上无疑是雪上加霜&#xff0c;第一时间找到了小蚁君&#xff0c;分析了一下当时的情况&#xff0c;先安装了小蚁的入侵检测系统&#xff0c;显示…

计算机毕业设计之java+ssm协同办公系统

项目介绍 本公司文档协同办公管理系统采用SSM&#xff08;SpringSpringMVCMyBatis&#xff09;框架开发,主要包括系统用户管理模块、用户信息模块、文件信息管理、个人事务管理、资料信息管理、登录模块、和退出模块等多个模块. 本系统主要包含了等系统用户管理、用户信息管理…

webpack5 PWA解决Web App 项目网络离线情况没法访问情况

为什么 开发 Web App 项目&#xff0c;项目一旦处于网络离线情况&#xff0c;就没法访问了。 我们希望给项目提供离线体验。 是什么 渐进式网络应用程序(progressive web application - PWA)&#xff1a;是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。…

Go语言中操作Redis

Redis介绍 Redis是一个开源的内存数据库&#xff0c;Redis提供了多种不同类型的数据结构&#xff0c;很多业务场景下的问题都可以很自然地映射到这些数据结构上。 除此之外&#xff0c;通过复制、持久化和客户端分片等特性&#xff0c;我们可以很方便地将Redis扩展成一个能够包…

Word控件Spire.Doc 【图像形状】教程(5) 如何在 C# 中将文本环绕在图像周围

Spire.Doc for .NET是一款专门对 Word 文档进行操作的 .NET 类库。在于帮助开发人员无需安装 Microsoft Word情况下&#xff0c;轻松快捷高效地创建、编辑、转换和打印 Microsoft Word 文档。拥有近10年专业开发经验Spire系列办公文档开发工具&#xff0c;专注于创建、编辑、转…

frp篇---frp-notify + Gotify 实现 FRP 用户上线通知

frp-notify Gotify 实现 FRP 用户上线通知1. 安装frp_notify2. Gotify 配置3. frp-notify 配置启动 frp_notify开机自启动1. 安装frp_notify 一个专注于消息通知的 frp server manager plugin 实现&#xff0c;让你对进入 frps 的连接了如指掌&#xff0c;不再裸奔。 项目链…

SSM之Spring注解式缓存Redis

目录 Sprig整合Redis 导入相关pom依赖 添加对应的的配置文件 IEDA安装lombok插件 引入外部多文件 applicationContext.xml的整合配置文件 redis注解式缓存 Cacheable 测试类注解 Cacheable 的测试代码 CachePut CachePut测试代码 CacheEvict CacheEvict测试代码 Spr…

如何考察候选人 Vue 技术水平?

答对这些问题&#xff0c;检测你是否真正掌握了Vue 请说一下响应式数据的原理 默认 Vue 在初始化数据时&#xff0c;会给 data 中的属性使用 Object.defineProperty 重新定义所有属性&#xff0c;当页面到对应属性时&#xff0c;会进行依赖收集(收集当前组件中的 watcher)如果…

论文阅读【8】Conditional Random Fields: An Introduction

1.概述 1.1 论文相关 这篇论文是介绍一个经典模型&#xff0c;条件随机场&#xff08;CRF&#xff09;。在很多领域中都存在序列标注任务&#xff0c;例如生物信息识别&#xff0c;计算机语言学和语音识别任务&#xff0c;其中自然语言处理中的词性标注任何和命名实体识别任务…

JS 数据结构:链表

单链表 每个节点中只包含一个指针域的链表称为单链表。 头结点—其指针域指向表中第一个结点的指针&#xff08;头结点不是必须的&#xff0c;只是习惯上加上头结点&#xff0c;而头结点的数据域一般记录的是该链表的相关数据&#xff0c;如&#xff1a;链表长度&#xff09;…

Redis-Linux中安装Redis、命令操作Redis

目录 一、Redis简介 NoSQL与SQL的区别 二、Linux上安装redis 上传并解压redis.gz 进入 redis的解压目录&#xff0c;执行命令 make ​编辑 修改redis为守护进程 们测试一下能否远程连接RedisDesktopManager客户端 开放6379端口 授权&#xff0c;允许远程连接 三、redis命…

小程序上新(2022.10.13~11.14)

20221101 【官方公告】境外主体小程序补充信息存储地区通知20221103 小程序基础库 2.27.1 更新 新增 框架 新增 xr-fame 能力&#xff0c;kanata 更新 详情新增 组件 map 组件新增 bindrendersuccess 属性 详情 (官方文档还查不到这个)新增 API 新增 wx.getRendererUserAgen…

tep时隔8个月迎来重大全新升级

tep此次更新&#xff0c;旨在从“工具”升级为“框架”&#xff0c;为此做了大量的代码整洁工作&#xff0c;重新设计了部分功能&#xff0c;项目脚手架也焕然一新。 功能展示 conftest.py 脚手架生成的conftest.py只有一行代码&#xff1a; fixture自动加载等操作都隐藏到了te…

【学习笔记22】JavaScript数组的练习题

笔记首发 一、已知一个排序好的数组 将数字按照原有顺序插入到数组内 var arr [10, 20, 30, 40, 50];var n 11;// 1. 将n插入数组中arr.push(n);// 2. 冒泡排序for (var k 0; k < arr.length - 1; k) {for (var i 0; i < arr.length - 1 - k; i) {if (arr[i] > …

antd——使用a-tree组件实现 检索+自动展开+自定义增删改查功能——技能提升

之前写后台管理系统时&#xff0c;遇到一个下面的需求&#xff0c;下面是最终完成的效果图。 实现的功能有&#xff1a; 1. 下拉 选择不同的类型——就是一个普通的select组件&#xff0c;下面并不做介绍 2. 通过关键字可以进行tree树形结构的筛选&#xff0c;然后将筛选后的…

数据结构学习笔记——查找算法

目录前言一、查找的相关概念&#xff08;一&#xff09;内查找和外查找&#xff08;二&#xff09;静态查找和动态查找&#xff08;三&#xff09;平均查找长度二、线性查找&#xff08;一&#xff09;顺序查找1、查找思想2、算法分析3、有序表的顺序查找&#xff08;二&#x…

gitlab-runner 的安装使用(含 .gitlab-ci.yml 的简单使用)

简介 GitLab Runner 是一个开源项目&#xff0c;用于运行您的作业并将结果发送回 GitLab。它与 GitLab CI 一起使用&#xff0c;GitLab CI 是 GitLab 随附的开源持续集成服务&#xff0c;用于协调作业。 简单理解就是一个服务放在那儿&#xff0c;当你提交代码时&#xff0c;…

[附源码]java毕业设计在线课程网站

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

腾讯安全SOC+能力图谱正式发布,助力政企构建闭环安全运营体系

随着云计算、人工智能、5G等新兴技术的融合发展&#xff0c;数字化转型正成为企业数字经济时代的重要发展路径。然而&#xff0c;数字化转型过程中IT架构的重塑、安全产品体系化能力不足带来的安全运营挑战&#xff0c;使得企业在业务突破上面临安全瓶颈。 面对网络安全事件频…