聊天室发图片和发表情设计思路

1.聊天室发图片

用户选择好图片后点击发送按钮,首先是调用后台提供的图片上传接口;

该接口先将需要发送的图片保存到服务器,保存成功后服务器返回一个图片地址给前台;

前台拿到这个地址后再将这个地址发送出去;

目标用户收到这个地址后就可以获取这个图片。

如果客户端是Web形式的,那么可以使用ajaxFileUpload这个jQuery插件,来实现异步的方式调用接口保存图片,获得后台返回的地址后再将图片地址发送出去。

ajaxFileUpload参考资料:http://www.mashangpiao.net/Article/Index/145

2.聊天室发表情

用户点击发送含有表情的消息其实发送的只是表情代号,目标用户接受这些代号之后就将他们解释成对应的表情图片

比如下面这段代码:

var reg = /\[\/([^\]]+)\/\]/g;
var say = "aabbbbcc[/i_f01/][/i_f02/]dddd[/i_f03/]ee";
say = say.replace(reg, "<img src=‘./face/$1.gif‘ />");

say中的[/i_f01/]就是自定义表情代号,其中i_f01是表情文件名,使用正则替换的方式就可以将消息中的表情代号替换成图片

时间: 2025-01-16 18:35:58

聊天室发图片和发表情设计思路的相关文章

微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷

今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也提高了黏度,对涨粉也好一些.详细能力如下: 公众号自定义菜单新增扫一扫.发图片.发位置功能 1. 扫码推送事件 用户点击按钮后,微信客户端将调起扫一扫工具,完成扫码操作后显示扫描结果(如果是URL,将进入URL),且会将扫码的结果传给开发者,开发者可以下发消息. 2. 扫码推送事件,且弹出“消息接收

微信公众平台开发(104) 自定义菜单扫一扫、发图片、发地理位置

关键字:微信公众平台 自定义菜单 扫一扫 发图片 发地理位置作者:方倍工作室原文:http://www.cnblogs.com/txw1958/p/weixin-menu-new-type.html 自定义菜单能够帮助公众号丰富界面,让用户更好更快地理解公众号的重要功能.微信增加了点击菜单后调起扫一扫(支持二维码/一维码).发图片.发地理位置的能力,需开发实现.原有自定义菜单开发权限的公众号,均可获得以上能力. 在这篇微信公众平台开发教程中,我们将介绍如何在自定义菜单上开发扫一扫.发图片.发地理

C#开发微信门户及应用(15)-微信菜单增加扫一扫、发图片、发地理位置功能

前面介绍了很多篇关于使用C#开发微信门户及应用的文章,基本上把当时微信能做的接口都封装差不多了,微信框架也积累了不少模块和用户,最近发现微信公众平台增加了不少内容,特别是在自定义菜单里面增加了扫一扫.发图片.发地理位置功能,这几个功能模块很重要,想想以前想在微信公众号里面增加一个扫描二维码的功能,都做不了,现在可以了,还可以拍照上传等功能,本文主要介绍基于我前面的框架系列文章,进一步介绍如何集成和使用这些新增功能. 1.微信几个功能的官方介绍 1). 扫码推送事件 用户点击按钮后,微信客户端将调

ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(四) 添加表情、群聊功能

休息了两天,还是决定把这个尾巴给收了.本篇是最后一篇,也算是草草收尾吧.今天要加上表情功能和群聊.基本上就差不多了,其他功能,读者可以自行扩展或者优化.至于我写的代码方面,自己也没去重构.好的,我们开始在原有的基础上添加功能. 1.表情功能 表情我用了一个jquery插件,qqFace.由于GitHub中源码已经包含,我这里不在粘贴地址.先看一下添加表情后的效果吧. 表情这里不要忘了加页面样式,表情选中样式.还有一个就是小bug就是,表情框被聊天框限制住了.另外,初始化表情插件的地方应该在有元素

保存带有图片的内容的设计思路

假设有需求,建立一条数据(如课程),需要给课程上传图片,支持多个上传,支持修改再上传,这个怎么设计流程: 新建的时候,一旦在窗口选择了某个图片,就做一次上传,然后让后台返回这个图片在数据库中的pid,保存课程的时候,讲pid传到后台进行保存,在数据库中以id进行关联 修改的时候,如果点击了删除图片,提交pid和课程id到后台,将对应关系进行删除即可,如果再有增加,直接将图片上传,并且把课程id一起带到后台进行关系添加,保存课程的时候就不用对pid进行任何处理了 ---项目组当前的设计思路,觉得很

Java网络编程 - 基于UDP协议 实现简单的聊天室程序

最近比较闲,一直在抽空回顾一些Java方面的技术应用. 今天没什么事做,基于UDP协议,写了一个非常简单的聊天室程序. 现在的工作,很少用到socket,也算是对Java网络编程方面的一个简单回忆. 先看一下效果: 实现的效果可以说是非常非常简单,但还是可以简单的看到一个实现原理. "聊天室001"的用户,小红和小绿相互聊了两句,"聊天室002"的小黑无人理会,在一旁寂寞着. 看一下代码实现: 1.首先是消息服务器的实现,功能很简单: 将客户端的信息(进入了哪一个聊

如何写一个发微博的页面(包括插入图片,插入表情,插入话题,插入Location) (一)

先上效果图: 先看页面布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"

java crm 进销存 websocket即时聊天发图片文字 好友群组 SSM源码

博文来源:http://www.fhadmin.org/webnewsdetail4.html 系统介绍: 1.系统采用主流的 SSM 框架 jsp JSTL bootstrap html5 (PC浏览器使用) 2.springmvc +spring4.3.7+ mybaits3.3  SSM 普通java web(非maven, 附赠pom.xml文件)  数据库:mysql 3.开发工具:myeclipse  eclipse idea 均可, 没有限制. 我这边myeclipse 2014

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(三) 之 实现单聊,群聊,发送图片,文件。

上篇讲解了如何搭建聊天服务器,以及客户端js怎么和layui的语法配合.服务器已经连接上了,那么聊天还会远吗? 进入正题,正如上一篇提到的我们用 Client.Group(groupId)的方法向客户端推送消息.本篇就先不把业务搞复杂了,就默认现在两个用户都各自打开了对方的聊天窗口,那么聊天过程是这样的. 同理,B给A发消息也是这个流程,因为无论如何,A(ID)和B(ID)都会按照规则生成同一个组名.其中由于LayIM已经帮我们在客户端做好了发送消息并且将消息展示在面板上,所以我们要做的就是当接