!28 ui风格优化

Merge pull request !28 from blue/v_2.0.0

README.md

@@ -17,6 +17,7 @@
 
 - 支持移动端和web端同时在线，多端消息同步
 - 目前仅兼容h5和微信小程序，后续会继续兼容更多终端类型
+- 页面风格优化：表情包更新、自动生成文字头像等
 
 感兴趣的小伙伴，可在下方扫码体验
 
@@ -210,33 +211,31 @@ wsApi.onClose((e) => {
 
 
 #### 界面截图
-文字聊天：
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E6%96%87%E5%AD%97%E8%81%8A%E5%A4%A9.jpg)
-
-发送图片、文件：
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E5%8F%91%E9%80%81%E5%9B%BE%E7%89%87%E6%96%87%E4%BB%B6.jpg)
-
-发送语音
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E5%8F%91%E9%80%81%E8%AF%AD%E9%9F%B3.jpg)
+私聊：
+![输入图片说明](%E6%88%AA%E5%9B%BE/web/%E7%A7%81%E8%81%8A.jpg)
 
 群聊：
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E7%BE%A4%E8%81%8A.jpg) 
+![输入图片说明](%E6%88%AA%E5%9B%BE/web/%E7%BE%A4%E8%81%8A1.jpg)
+
+![输入图片说明](%E6%88%AA%E5%9B%BE/web/%E7%BE%A4%E8%81%8A2.jpg)
 
 
 好友列表：
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8.jpg)
+![输入图片说明](%E6%88%AA%E5%9B%BE/web/%E5%A5%BD%E5%8F%8B%E5%88%97%E8%A1%A8.jpg)
 
 群聊列表：
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E7%BE%A4%E8%81%8A%E5%88%97%E8%A1%A8.jpg)
+![输入图片说明](%E6%88%AA%E5%9B%BE/web/%E7%BE%A4%E8%81%8A%E5%88%97%E8%A1%A8.jpg)
 
 微信小程序:
-![输入图片说明](%E6%88%AA%E5%9B%BE/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F.jpg)
+![输入图片说明](%E6%88%AA%E5%9B%BE/wx-mp/%E8%81%8A%E5%A4%A9.jpg)
+
+![输入图片说明](%E6%88%AA%E5%9B%BE/wx-mp/%E5%85%B6%E4%BB%96.jpg)
 
 #### 加入交流群
 
 ![输入图片说明](%E6%88%AA%E5%9B%BE/%E4%BA%A4%E6%B5%81%E7%BE%A4.png)
 
-欢迎进群与小伙们一起交流， **加群前请务必先star!!!** 
+欢迎进群与小伙们一起交流， **申请加群前请务必先star哦** 
 
 
 #### 嘿嘿

im-client/src/main/java/com/bx/imclient/IMClient.java

@@ -1,14 +1,14 @@
 package com.bx.imclient;
 
 import com.bx.imclient.sender.IMSender;
+import com.bx.imcommon.enums.IMTerminalType;
 import com.bx.imcommon.model.IMGroupMessage;
 import com.bx.imcommon.model.IMPrivateMessage;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.context.annotation.Configuration;
 
-import java.util.Collection;
-import java.util.Collections;
 import java.util.List;
+import java.util.Map;
 
 @Configuration
 public class IMClient {
@@ -31,8 +31,19 @@ public class IMClient {
      * @param userIds 用户id列表
      * @return 在线的用户列表
      */
-    public List<Long> isOnline(List<Long> userIds){
-        return imSender.isOnline(userIds);
+    public List<Long> getOnlineUser(List<Long> userIds){
+        return imSender.getOnlineUser(userIds);
+    }
+
+
+    /**
+     * 判断多个用户是否在线
+     *
+     * @param userIds 用户id列表
+     * @return 在线的用户终端
+     */
+    public Map<Long,List<IMTerminalType>> getOnlineTerminal(List<Long> userIds){
+        return imSender.getOnlineTerminal(userIds);
     }
 
     /**

im-client/src/main/java/com/bx/imclient/sender/IMSender.java

@@ -14,6 +14,7 @@ import org.springframework.data.redis.core.RedisTemplate;
 import org.springframework.stereotype.Service;
 
 import java.util.*;
+import java.util.concurrent.atomic.AtomicInteger;
 import java.util.stream.Collectors;
 
 @Service
@@ -90,12 +91,12 @@ public class IMSender {
         List<Object> serverIds = redisTemplate.opsForValue().multiGet(sendMap.keySet());
         // 格式:map<服务器id,list<接收方>>
         Map<Integer, List<IMUserInfo>> serverMap = new HashMap<>();
-        List<IMUserInfo> offLineUsers = Collections.synchronizedList(new LinkedList<>());
+        List<IMUserInfo> offLineUsers = new LinkedList<>();
         int idx = 0;
         for (Map.Entry<String,IMUserInfo> entry : sendMap.entrySet()) {
             Integer serverId = (Integer)serverIds.get(idx++);
             if (serverId != null) {
-                List<IMUserInfo> list = serverMap.computeIfAbsent(serverId, o -> Collections.synchronizedList(new LinkedList<>()));
+                List<IMUserInfo> list = serverMap.computeIfAbsent(serverId, o -> new LinkedList<>());
                 list.add(entry.getValue());
             } else {
                 // 加入离线列表
@@ -150,34 +151,40 @@ public class IMSender {
         }
     }
 
-    public Boolean isOnline(Long userId) {
-        String key = String.join(":", IMRedisKey.IM_USER_SERVER_ID, userId.toString(), "*");
-        return !redisTemplate.keys(key).isEmpty();
-    }
-
-    public List<Long> isOnline(List<Long> userIds){
+    public Map<Long,List<IMTerminalType>> getOnlineTerminal(List<Long> userIds){
         if(CollectionUtil.isEmpty(userIds)){
-            return Collections.emptyList();
+            return Collections.EMPTY_MAP;
         }
         // 把所有用户的key都存起来
-        Map<String,Long> keyMap = new HashMap<>();
+        Map<String,IMUserInfo> userMap = new HashMap<>();
         for(Long id:userIds){
             for (Integer terminal : IMTerminalType.codes()) {
                 String key = String.join(":", IMRedisKey.IM_USER_SERVER_ID, id.toString(), terminal.toString());
-                keyMap.put(key,id);
+                userMap.put(key,new IMUserInfo(id,terminal));
             }
         }
         // 批量拉取
-        List<Object> serverIds = redisTemplate.opsForValue().multiGet(keyMap.keySet());
+        List<Object> serverIds = redisTemplate.opsForValue().multiGet(userMap.keySet());
         int idx = 0;
-        List<Long> onlineIds = new LinkedList<>();
-        for (Map.Entry<String,Long> entry : keyMap.entrySet()) {
+        Map<Long,List<IMTerminalType>> onlineMap = new HashMap<>();
+        for (Map.Entry<String,IMUserInfo> entry : userMap.entrySet()) {
             // serverid有值表示用户在线
             if(serverIds.get(idx++) != null){
-                onlineIds.add(entry.getValue());
+                IMUserInfo userInfo = entry.getValue();
+                List<IMTerminalType> terminals = onlineMap.computeIfAbsent(userInfo.getId(), o -> new LinkedList<>());
+                terminals.add(IMTerminalType.fromCode(userInfo.getTerminal()));
             }
         }
         // 去重并返回
-        return onlineIds.stream().distinct().collect(Collectors.toList());
+        return onlineMap;
+    }
+
+    public Boolean isOnline(Long userId) {
+        String key = String.join(":", IMRedisKey.IM_USER_SERVER_ID, userId.toString(), "*");
+        return !redisTemplate.keys(key).isEmpty();
+    }
+
+    public List<Long> getOnlineUser(List<Long> userIds){
+        return new LinkedList<>(getOnlineTerminal(userIds).keySet());
     }
 }

im-platform/src/main/java/com/bx/implatform/controller/UserController.java

@@ -7,6 +7,7 @@ import com.bx.implatform.service.IUserService;
 import com.bx.implatform.session.SessionContext;
 import com.bx.implatform.session.UserSession;
 import com.bx.implatform.util.BeanUtils;
+import com.bx.implatform.vo.OnlineTerminalVO;
 import com.bx.implatform.vo.UserVO;
 import io.swagger.annotations.Api;
 import io.swagger.annotations.ApiOperation;
@@ -34,6 +35,13 @@ public class UserController {
         return ResultUtils.success(onlineIds);
     }
 
+    @GetMapping("/terminal/online")
+    @ApiOperation(value = "判断用户哪个终端在线",notes="返回在线的用户id的终端集合")
+    public Result<List<OnlineTerminalVO>> getOnlineTerminal(@NotEmpty @RequestParam("userIds") String userIds){
+        return ResultUtils.success(userService.getOnlineTerminals(userIds));
+    }
+
+
     @GetMapping("/self")
     @ApiOperation(value = "获取当前用户信息",notes="获取当前用户信息")
     public Result<UserVO> findSelfInfo(){
@@ -46,10 +54,8 @@ public class UserController {
 
     @GetMapping("/find/{id}")
     @ApiOperation(value = "查找用户",notes="根据id查找用户")
-    public Result findByIde(@NotEmpty @PathVariable("id") long id){
-        User user = userService.getById(id);
-        UserVO userVO = BeanUtils.copyProperties(user,UserVO.class);
-        return ResultUtils.success(userVO);
+    public Result findById(@NotEmpty @PathVariable("id") Long id){
+        return ResultUtils.success(userService.findUserById(id));
     }
 
     @PutMapping("/update")

im-platform/src/main/java/com/bx/implatform/service/IUserService.java

@@ -6,6 +6,7 @@ import com.bx.implatform.entity.User;
 import com.bx.implatform.dto.LoginDTO;
 import com.bx.implatform.dto.RegisterDTO;
 import com.bx.implatform.vo.LoginVO;
+import com.bx.implatform.vo.OnlineTerminalVO;
 import com.bx.implatform.vo.UserVO;
 
 import java.util.List;
@@ -25,8 +26,13 @@ public interface IUserService extends IService<User> {
 
     void update(UserVO vo);
 
+    UserVO findUserById(Long id);
+
     List<UserVO> findUserByName(String name);
 
     List<Long> checkOnline(String userIds);
 
+    List<OnlineTerminalVO> getOnlineTerminals(String userIds);
+
+
 }

im-platform/src/main/java/com/bx/implatform/service/impl/GroupServiceImpl.java

@@ -3,6 +3,7 @@ package com.bx.implatform.service.impl;
 import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
+import com.bx.imclient.IMClient;
 import com.bx.implatform.contant.Constant;
 import com.bx.implatform.contant.RedisKey;
 import com.bx.implatform.entity.Friend;
@@ -52,6 +53,9 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
     @Autowired
     private IFriendService friendsService;
 
+    @Autowired
+    private IMClient imClient;
+
     /**
      * 创建新群聊
      *
@@ -292,7 +296,15 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
     @Override
     public List<GroupMemberVO> findGroupMembers(Long groupId) {
         List<GroupMember> members = groupMemberService.findByGroupId(groupId);
-        return members.stream().map(m->BeanUtils.copyProperties(m,GroupMemberVO.class)).collect(Collectors.toList());
+        List<Long> userIds =  members.stream().map(GroupMember::getUserId).collect(Collectors.toList());
+        List<Long> onlineUserIds = imClient.getOnlineUser(userIds);
+        return members.stream().map(m->{
+            GroupMemberVO vo = BeanUtils.copyProperties(m,GroupMemberVO.class);
+            vo.setOnline(onlineUserIds.contains(m.getUserId()));
+            return vo;
+        }).sorted((m1,m2)->{
+            return m2.getOnline().compareTo(m1.getOnline());
+        }).collect(Collectors.toList());
     }
 
 }

im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java

@@ -6,7 +6,6 @@ import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.bx.imclient.IMClient;
 import com.bx.imcommon.contant.IMConstant;
-import com.bx.imcommon.enums.IMTerminalType;
 import com.bx.imcommon.model.IMPrivateMessage;
 import com.bx.imcommon.model.IMUserInfo;
 import com.bx.implatform.entity.Friend;
@@ -159,6 +158,9 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         }
 
         List<Friend> friends = friendService.findFriendByUserId(session.getUserId());
+        if(friends.isEmpty()){
+            return;
+        }
         List<Long> friendIds = friends.stream().map(Friend::getFriendId).collect(Collectors.toList());
         // 获取当前用户所有未读消息
         LambdaQueryWrapper<PrivateMessage> queryWrapper = Wrappers.lambdaQuery();

im-platform/src/main/java/com/bx/implatform/service/impl/UserServiceImpl.java

@@ -6,6 +6,7 @@ import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
 import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.bx.imclient.IMClient;
+import com.bx.imcommon.enums.IMTerminalType;
 import com.bx.imcommon.util.JwtUtil;
 import com.bx.implatform.config.JwtProperties;
 import com.bx.implatform.dto.LoginDTO;
@@ -24,6 +25,7 @@ import com.bx.implatform.session.SessionContext;
 import com.bx.implatform.session.UserSession;
 import com.bx.implatform.util.BeanUtils;
 import com.bx.implatform.vo.LoginVO;
+import com.bx.implatform.vo.OnlineTerminalVO;
 import com.bx.implatform.vo.UserVO;
 import lombok.extern.slf4j.Slf4j;
 import org.springframework.beans.factory.annotation.Autowired;
@@ -33,7 +35,9 @@ import org.springframework.stereotype.Service;
 import org.springframework.transaction.annotation.Transactional;
 
 import java.util.Arrays;
+import java.util.LinkedList;
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 
 
@@ -95,7 +99,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
     /**
      * 用refreshToken换取新 token
      *
-     * @param refreshToken
+     * @param refreshToken  刷新token
      * @return 登录token
      */
     @Override
@@ -150,7 +154,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
      * 根据用户名查询用户
      *
      * @param username 用户名
-     * @return
+     * @return 用户信息
      */
     @Override
     public User findUserByUserName(String username) {
@@ -205,12 +209,25 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
         log.info("用户信息更新，用户:{}}", user);
     }
 
+    /**
+     * 根据用户昵id查询用户以及在线状态
+     *
+     * @param id 用户id
+     * @return 用户信息
+     */
+    @Override
+    public UserVO findUserById(Long id) {
+        User user = this.getById(id);
+        UserVO vo = BeanUtils.copyProperties(user,UserVO.class);
+        vo.setOnline(imClient.isOnline(id));
+        return vo;
+    }
 
     /**
      * 根据用户昵称查询用户，最多返回20条数据
      *
      * @param name 用户名或昵称
-     * @return
+     * @return 用户列表
      */
     @Override
     public List<UserVO> findUserByName(String name) {
@@ -221,7 +238,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
             .last("limit 20");
         List<User> users = this.list(queryWrapper);
         List<Long> userIds = users.stream().map(User::getId).collect(Collectors.toList());
-        List<Long> onlineUserIds = imClient.isOnline(userIds);
+        List<Long> onlineUserIds = imClient.getOnlineUser(userIds);
         return users.stream().map(u-> {
             UserVO vo = BeanUtils.copyProperties(u,UserVO.class);
             vo.setOnline(onlineUserIds.contains(u.getId()));
@@ -239,7 +256,28 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
     public List<Long> checkOnline(String userIds) {
         List<Long> userIdList = Arrays.stream(userIds.split(","))
             .map(Long::parseLong).collect(Collectors.toList());
-        return imClient.isOnline(userIdList);
+        return imClient.getOnlineUser(userIdList);
     }
 
+
+    /**
+     * 获取用户在线的终端类型
+     *
+     * @param userIds 用户id，多个用‘,’分割
+     * @return 在线用户终端
+     */
+    @Override
+    public List<OnlineTerminalVO> getOnlineTerminals(String userIds) {
+        List<Long> userIdList = Arrays.stream(userIds.split(","))
+            .map(Long::parseLong).collect(Collectors.toList());
+        // 查询在线的终端
+        Map<Long,List<IMTerminalType>> terminalMap = imClient.getOnlineTerminal(userIdList);
+        // 组装vo
+        List<OnlineTerminalVO> vos = new LinkedList<>();
+        terminalMap.forEach((userId,types)->{
+            List<Integer> terminals = types.stream().map(IMTerminalType::code).collect(Collectors.toList());
+            vos.add(new OnlineTerminalVO(userId,terminals));
+        });
+        return vos;
+    }
 }

im-platform/src/main/java/com/bx/implatform/vo/GroupMemberVO.java

@@ -21,6 +21,9 @@ public class GroupMemberVO {
     @ApiModelProperty("是否已退出")
     private Boolean quit;
 
+    @ApiModelProperty(value = "是否在线")
+    private Boolean online;
+
     @ApiModelProperty("备注")
     private String remark;
 

im-platform/src/main/java/com/bx/implatform/vo/OnlineTerminalVO.java

@@ -0,0 +1,24 @@
+package com.bx.implatform.vo;
+
+import io.swagger.annotations.ApiModelProperty;
+import lombok.AllArgsConstructor;
+import lombok.Data;
+
+import java.util.List;
+
+/**
+ * @author: 谢绍许
+ * @date: 2023-10-28 21:17:59
+ * @version: 1.0
+ */
+@Data
+@AllArgsConstructor
+public class OnlineTerminalVO {
+
+    @ApiModelProperty(value = "用户id")
+    private Long userId;
+
+    @ApiModelProperty(value = "在线终端类型")
+    private List<Integer> terminals;
+
+}

im-server/src/main/java/com/bx/imserver/netty/IMChannelHandler.java

@@ -91,8 +91,8 @@ public class IMChannelHandler extends SimpleChannelInboundHandler<IMSendInfo> {
                 AttributeKey<Long> attr = AttributeKey.valueOf("USER_ID");
                 Long userId = ctx.channel().attr(attr).get();
                 AttributeKey<Integer> terminalAttr = AttributeKey.valueOf(ChannelAttrKey.TERMINAL_TYPE);
-                Integer ternimal = ctx.channel().attr(terminalAttr).get();
-                log.info("心跳超时，即将断开连接,用户id:{},终端类型:{} ",userId,ternimal);
+                Integer terminal = ctx.channel().attr(terminalAttr).get();
+                log.info("心跳超时，即将断开连接,用户id:{},终端类型:{} ",userId,terminal);
                 ctx.channel().close();
             }
         } else {

im-server/src/main/java/com/bx/imserver/netty/processor/HeartbeatProcessor.java

@@ -45,8 +45,8 @@ public class HeartbeatProcessor extends AbstractMessageProcessor<IMHeartbeatInfo
             AttributeKey<Long> userIdAttr = AttributeKey.valueOf(ChannelAttrKey.USER_ID);
             Long userId = ctx.channel().attr(userIdAttr).get();
             AttributeKey<Integer> terminalAttr = AttributeKey.valueOf(ChannelAttrKey.TERMINAL_TYPE);
-            Integer ternimal = ctx.channel().attr(terminalAttr).get();
-            String key = String.join(":", IMRedisKey.IM_USER_SERVER_ID,userId.toString(),ternimal.toString());
+            Integer terminal = ctx.channel().attr(terminalAttr).get();
+            String key = String.join(":", IMRedisKey.IM_USER_SERVER_ID,userId.toString(),terminal.toString());
             redisTemplate.expire(key, IMConstant.ONLINE_TIMEOUT_SECOND, TimeUnit.SECONDS);
         }
     }

im-ui/src/api/date.js

@@ -0,0 +1,66 @@
+let toTimeText = (timeStamp, simple) => {
+	var dateTime = new Date(timeStamp)
+	var currentTime = Date.parse(new Date()); //当前时间
+	var timeDiff = currentTime - dateTime; //与当前时间误差
+	var timeText = '';
+	if (timeDiff <= 60000) { //一分钟内
+		timeText = '刚刚';
+	} else if (timeDiff > 60000 && timeDiff < 3600000) { 
+		//1小时内
+		timeText = Math.floor(timeDiff / 60000) + '分钟前';
+	} else if (timeDiff >= 3600000 && timeDiff < 86400000 && !isYestday(dateTime)) { 
+		//今日
+		timeText = formatDateTime(dateTime).substr(11, 5);
+	} else if (isYestday(dateTime)) { 
+		//昨天
+		timeText = '昨天' + formatDateTime(dateTime).substr(11, 5); 
+	} else if (isYear(dateTime)) { 
+		//今年
+		timeText = formatDateTime(dateTime).substr(5, simple ? 5 : 14);
+	} else { 
+		//不属于今年
+		timeText = formatDateTime(dateTime);
+		if(simple){
+			timeText = timeText.substring(2,5);
+		}
+	}
+	return timeText;
+}
+
+let isYestday = (date) => {
+	var yesterday = new Date(new Date() - 1000 * 60 * 60 * 24);
+	return yesterday.getYear() === date.getYear() &&
+		yesterday.getMonth() === date.getMonth() &&
+		yesterday.getDate() === date.getDate();
+}
+
+let isYear = (date) => {
+	return date.getYear() === new Date().getYear();
+}
+
+let formatDateTime = (date) => {
+	if (date === '' || !date) {
+		return ''
+	}
+	var dateObject = new Date(date)
+	var y = dateObject.getFullYear()
+	var m = dateObject.getMonth() + 1
+	m = m < 10 ? ('0' + m) : m
+	var d = dateObject.getDate()
+	d = d < 10 ? ('0' + d) : d
+	var h = dateObject.getHours()
+	h = h < 10 ? ('0' + h) : h
+	var minute = dateObject.getMinutes()
+	minute = minute < 10 ? ('0' + minute) : minute
+	var second = dateObject.getSeconds()
+	second = second < 10 ? ('0' + second) : second
+	return y + '/' + m + '/' + d + ' ' + h + ':' + minute + ':' + second
+}
+
+
+export{
+	toTimeText,
+	isYestday,
+	isYear,
+	formatDateTime
+}

im-ui/src/api/emotion.js

@@ -1,4 +1,10 @@
-const emoTextList =  ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'];
+const emoTextList = ['憨笑', '媚眼', '开心', '坏笑', '可怜', '爱心', '笑哭', '拍手', '惊喜', '打气',
+	'大哭', '流泪', '饥饿', '难受', '健身', '示爱', '色色', '眨眼', '暴怒', '惊恐',
+	'思考', '头晕', '大吐', '酷笑', '翻滚', '享受', '鼻涕', '快乐', '雀跃', '微笑',
+	'贪婪', '红心', '粉心', '星星', '大火', '眼睛', '音符', "叹号", "问号", "绿叶",
+	"燃烧", "喇叭", "警告", "信封", "房子", "礼物", "点赞", "举手", "拍手", "点头",
+	"摇头", "偷瞄", "庆祝", "疾跑", "打滚", "惊吓", "起跳"
+];
 
 
 let transform = (content) => {
@@ -10,7 +16,7 @@ let textToImg = (emoText) => {
 	let word = emoText.replace(/\#|\;/gi, '');
 	let idx = emoTextList.indexOf(word);
 	let url = require(`@/assets/emoji/${idx}.gif`);
-	return `<img src="${url}" style="vertical-align:bottom;"/>`
+	return `<img src="${url}" style="width:40px;height:40px;vertical-align:bottom;"/>`
 }
 
 

im-ui/src/api/enums.js

@@ -6,6 +6,7 @@ const MESSAGE_TYPE = {
 	AUDIO:3,
 	VIDEO:4,
 	RECALL:10,
+	TIP_TIME:20,
 	RTC_CALL: 101,
 	RTC_ACCEPT: 102,
 	RTC_REJECT: 103,
@@ -21,7 +22,13 @@ const USER_STATE = {
 	BUSY: 2
 }
 
+const TERMINAL_TYPE = {
+	WEB: 0,
+	APP: 1
+}
+
 export {
 	MESSAGE_TYPE,
-	USER_STATE
+	USER_STATE,
+	TERMINAL_TYPE
 }

im-ui/src/api/wssocket.js

@@ -86,7 +86,7 @@ let close = () => {
 
 
 //心跳设置
-var heartCheck = {
+let heartCheck = {
 	timeout: 5000, //每段时间发送一次心跳包 这里设置为20s
 	timeoutObj: null, //延时发送消息对象（启动心跳新建这个对象，收到消息后重置对象）
 	start: function() {
@@ -112,7 +112,7 @@ var heartCheck = {
 
 
 // 实际调用的方法
-function sendMessage(agentData) {
+let sendMessage = (agentData) => {
 	// console.log(globalCallback)
 	if (websock.readyState === websock.OPEN) {
 		// 若是ws开启状态
@@ -131,16 +131,16 @@ function sendMessage(agentData) {
 }
 
 
-function onMessage(callback) {
+let onMessage = (callback) => {
 	messageCallBack = callback;
 }
 
 
-function onOpen(callback) {
+let onOpen = (callback) => {
 	openCallBack = callback;
 }
 
-function onClose(callback) {
+let onClose = (callback) => {
 	closeCallBack = callback;
 }
 // 将方法暴露出去