IM即时消息_聊天框玩法

这篇主要介绍IM即时消息聊天框的玩法，如果你正要开发或准备开发一款属于自己的IM即时聊天，那么它很实用;

聊天框_时间戳显示逻辑

timeUtil

/*
@params curTime: 当前聊天消息时间戳
@params preTime: 上一条聊天消息的时间戳
*/
export chatShowTime(curTime, preTime) {
	// 如果没有上一条时间,就返回当前聊天消息时间
	if (!preTime) {
	    // 请使用timeUtil,中的HandleChatListTime()方法;
		return HandleChatListTime(curTime);
	}
	// 大于一分钟就显示时间
	if (curTime - preTime > 60000) {
		return HandleChatListTime(curTime);
	} else {
		// 否则不显示时间
		return '';
	}
}

聊天框_文字消息显示样式

// css
.message_text{ // 文字消息
    // 根据UI编写
	background-color: #1E5D94;
	font-size: 14px;
	padding: 12px;
	color: #FFFFFF;	
	display: inline-block;
	border-radius: 0px 4px 4px 4px;
	// 是否指定鼠标手势
	cursor: pointer;
	// 核心代码
	white-space: pre-wrap;
	word-break: break-all;
	word-break: break-word;
	// 如果你的表情是图片
    img{
        width: 19px;
        height: 19px;
        vertical-align: text-bottom;
    }
}
// tsx
{
	 item.message.type === 'text' ?
	 <div className={`${style.message_text}`}>
	 	{item.message.content}
	 </div>
	 : ''
}
// vue
<div
	v-if="item.message.type === 'text'" 
	className="message_text"}
	v-html="item.message.content">
</div>

聊天框_文字复制到剪贴板

// 定义方法
export function CopyToClipboard(text: string) {  
  return new Promise((resolve, reject) => {  
      if (window.navigator.clipboard) {  
          // 推荐方法，支持最新浏览器  
          navigator.clipboard.writeText(text).then(resolve, reject);  
      } else {  
          // 兼容不支持navigator.clipboard的浏览器  
          var textArea = document.createElement("textarea");  
          textArea.value = text;  
          document.body.appendChild(textArea);  
          textArea.select();  
          try {  
              var successful = document.execCommand('copy');  
              var msg = successful ? 'successful' : 'unsuccessful';  
              resolve(successful);  
          } catch (err) {  
              reject(err);  
          } finally {  
              document.body.removeChild(textArea);  
          }  
      }  
  });  
}
// 使用
const str = item.message.content;
CopyToClipboard(str).then(() => {
  console.log('复制成功');
}).catch(() => {
  console.log('复制失败');
})

聊天记录_搜索文字高亮显示

// react 
const searchText = useRef('');
const handleTextChatHighlight = (item: {content: string}) => {
	return <span dangerouslySetInnerHTML={{__html: item.content.replace(searchText.current,'<span style=\'color: #58AEFF;\'>'+searchText.current+'</span>')}}></span>
}
// vue
<div
  v-html="item.content.replace(searchText,
   '<span style='color: #ee7e21;font-size: 16px;'>' + searchText +'</span>')">              
/div>