实现效果

在《仿微信聊天程序 - 09. 聊天窗口》章节中，已经实现了基本的聊天界面框架，《09. 聊天信息》这里只是补充实现聊天内容部分功能。

界面布局

聊天内容使用的是WebView来显示，所以这里的布局就是HTML来渲染双方的聊天信息，下面一个简单对话的聊天内容布局代码：

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="main.css">
    <script src="main.js"></script>
</head>
<body>
<div id="content">
    <!--
    <div class="message-item">
        <div class="user">
            <span class="nickname">自己的昵称</span>
            <span>时间</span>
        </div>
        <div class="content">
            这是内容
        </div>
    </div>
    <div class="message-item">
        <div class="contacts">
            <span class="nickname">好友的昵称</span>
            <span>时间</span>
        </div>
        <div class="content">
            这是内容
        </div>
    </div>
    -->
</div>
</body>
</html>

样式美化

聊天内容使用的是HTML渲染聊天内容，所以CSS就是也是HTML标准的CSS，完整的CSS代码如下：

 #content {
  padding: 15px;
}
.message-item {
  padding: 5px 0;
}
.nickname {
  margin-right: 8px;
}
.user {
  color: green;
}
.contacts {
  color: blue;
}
.content {
  padding: 5px 0;
}

内容管理

聊天内容的管理使用JavaScript实现的，也就是说通过Java调用JavaScript的代码实现对聊天内容的插入和删除，下面是JavaScript实现的功能代码：

 var main = {};
 
main.append = function (html) {
  var ele = document.createElement("div");
  ele.innerHTML = html;
  document.getElementById("content").appendChild(ele);
  window.scrollTo(0, document.body.scrollHeight);
};
 
main.clear = function () {
  document.getElementById("content").innerHTML = "";
};

逻辑控制

调整原来ChatMainController的代码，使用WebView引擎构建JavaScript对象，使用JavaScript对象实现对聊天内容的管理：

 /**
 * @author michong
 */
public class ChatMainController implements UserDataController {
    public Label nicknameLabel;
    public WebView chatWebView;
    public TextArea messageTextArea;
 
    private JSObject js;
    private Long contactsId;
 
    @Override
    public void initialize(Object data) {
        contactsId = (Long) data;
        initializeUI();
        initializeEvent();
    }
 
    void initializeUI() {
        chatWebView.setContextMenuEnabled(false);
        chatWebView.setBlendMode(BlendMode.DARKEN);
        WebEngine engine = chatWebView.getEngine();
        engine.setJavaScriptEnabled(true);
        engine.getLoadWorker().stateProperty().addListener((obj, ov, nv) -> {
            if (nv == Worker.State.SUCCEEDED) {
                js = (JSObject) engine.executeScript("window.main");
                renderDebugData();
            }
        });
        engine.load(Objects.requireNonNull(getClass().getResource("/html/main.html")).toExternalForm());
    }
 
    void initializeEvent() {
        messageTextArea.setOnKeyPressed(e -> {
            if (e.isControlDown() && e.getCode() == KeyCode.ENTER) {
                onSendClick(null);
            }
        });
    }
 
    void renderDebugData() {
        nicknameLabel.setText("WxID: " + contactsId);
        MessageVO from = new MessageVO();
        from.setNickname("米虫1001");
        from.setMessage("仿微信聊天程序源码可以搜索微信小程序“Coding鱼塘”获取下载地址");
        from.setTimestamp(new Date().getTime());
        append(from, true);
    }
 
    void append(MessageVO vo, boolean isContacts) {
        js.call("append", Html.of(vo.getNickname(), vo.getTimestamp(), vo.getMessage(), isContacts));
    }
 
    public void onClearClick(ActionEvent actionEvent) {
        js.call("clear");
    }
 
    public void onCloseClick(ActionEvent actionEvent) {
    }
 
    public void onSendClick(ActionEvent actionEvent) {
        String content = messageTextArea.getText();
        if (content.trim().length() == 0) {
            return;
        }
 
        MessageVO from = new MessageVO();
        from.setNickname("我");
        from.setMessage(content);
        from.setTimestamp(new Date().getTime());
        append(from, false);
        messageTextArea.clear();
    }
 
}

内容构建

聊天内容构建工具Html：

 /**
 * @author michong
 */
public class Html {
 
    public static String of(String nickname, long timestamp, String content, boolean isContacts) {
        String time = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss").format(new Date(timestamp));
        // @formatter:off
        return "<div class='message-item'>"
                + "<div class='" + (isContacts ? "user" : "contacts") + "'>"
                    + "<span class='nickname'>" + nickname + "</span>"
                    + "<span>" + time + "</span>"
                + "</div>"
                + "<div class='content'>" + escape(content) + "</div>"
             + "</div>";
        // @formatter:on
    }
 
    private static String escape(String content) {
        // @formatter:off
        return content.replace("&", "&amp;")
                .replace("\t", "&nbsp;&nbsp;")
                .replace("<", "&lt;")
                .replace(">", "&gt;")
                .replace(" ", "&nbsp;")
                .replace("'", "&#39;")
                .replace("\"", "&quot;")
                .replace("\r\n", "\n")
                .replace("\n", "<br>");
        // @formatter:on
    }
}

posted on 2023-07-16 16:55 $$X$$ 阅读(109) 评论(0) 编辑收藏举报

刷新页面返回顶部

（评论功能已被禁用）

相关博文：

· 仿微信聊天程序 - 08. 聊天窗口

· 仿微信聊天程序 - 07. 好友信息

· 使用HTML5仿PC端微信聊天界面

· 小程序版聊天室|聊天小程序|仿微信聊天界面小程序

· 微信接口信息配置

阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）

1710

昵称： $$X$$
园龄： 2年3个月
粉丝： 1
关注： 0

+加关注

实现效果

界面布局

样式美化

内容管理

逻辑控制

内容构建

我的标签

积分与排名

随笔分类 (60)

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="main.css">
	<script src="main.js"></script>
	</head>
	<body>
	<div id="content">
	<!--
	<div class="message-item">
	<div class="user">
	<span class="nickname">自己的昵称</span>
	<span>时间</span>
	</div>
	<div class="content">
	这是内容
	</div>
	</div>
	<div class="message-item">
	<div class="contacts">
	<span class="nickname">好友的昵称</span>
	<span>时间</span>
	</div>
	<div class="content">
	这是内容
	</div>
	</div>
	-->
	</div>
	</body>
	</html>

	#content {
	padding: 15px;
	}
	.message-item {
	padding: 5px 0;
	}
	.nickname {
	margin-right: 8px;
	}
	.user {
	color: green;
	}
	.contacts {
	color: blue;
	}
	.content {
	padding: 5px 0;
	}

	var main = {};

	main.append = function (html) {
	var ele = document.createElement("div");
	ele.innerHTML = html;
	document.getElementById("content").appendChild(ele);
	window.scrollTo(0, document.body.scrollHeight);
	};

	main.clear = function () {
	document.getElementById("content").innerHTML = "";
	};

	/**
	* @author michong
	*/
	public class ChatMainController implements UserDataController {
	public Label nicknameLabel;
	public WebView chatWebView;
	public TextArea messageTextArea;

	private JSObject js;
	private Long contactsId;

	@Override
	public void initialize(Object data) {
	contactsId = (Long) data;
	initializeUI();
	initializeEvent();
	}

	void initializeUI() {
	chatWebView.setContextMenuEnabled(false);
	chatWebView.setBlendMode(BlendMode.DARKEN);
	WebEngine engine = chatWebView.getEngine();
	engine.setJavaScriptEnabled(true);
	engine.getLoadWorker().stateProperty().addListener((obj, ov, nv) -> {
	if (nv == Worker.State.SUCCEEDED) {
	js = (JSObject) engine.executeScript("window.main");
	renderDebugData();
	}
	});
	engine.load(Objects.requireNonNull(getClass().getResource("/html/main.html")).toExternalForm());
	}

	void initializeEvent() {
	messageTextArea.setOnKeyPressed(e -> {
	if (e.isControlDown() && e.getCode() == KeyCode.ENTER) {
	onSendClick(null);
	}
	});
	}

	void renderDebugData() {
	nicknameLabel.setText("WxID: " + contactsId);
	MessageVO from = new MessageVO();
	from.setNickname("米虫1001");
	from.setMessage("仿微信聊天程序源码可以搜索微信小程序“Coding鱼塘”获取下载地址");
	from.setTimestamp(new Date().getTime());
	append(from, true);
	}

	void append(MessageVO vo, boolean isContacts) {
	js.call("append", Html.of(vo.getNickname(), vo.getTimestamp(), vo.getMessage(), isContacts));
	}

	public void onClearClick(ActionEvent actionEvent) {
	js.call("clear");
	}

	public void onCloseClick(ActionEvent actionEvent) {
	}

	public void onSendClick(ActionEvent actionEvent) {
	String content = messageTextArea.getText();
	if (content.trim().length() == 0) {
	return;
	}

	MessageVO from = new MessageVO();
	from.setNickname("我");
	from.setMessage(content);
	from.setTimestamp(new Date().getTime());
	append(from, false);
	messageTextArea.clear();
	}

	}

	/**
	* @author michong
	*/
	public class Html {

	public static String of(String nickname, long timestamp, String content, boolean isContacts) {
	String time = new SimpleDateFormat("yyyy/MM/dd HH:mm:ss").format(new Date(timestamp));
	// @formatter:off
	return "<div class='message-item'>"
	+ "<div class='" + (isContacts ? "user" : "contacts") + "'>"
	+ "<span class='nickname'>" + nickname + "</span>"
	+ "<span>" + time + "</span>"
	+ "</div>"
	+ "<div class='content'>" + escape(content) + "</div>"
	+ "</div>";
	// @formatter:on
	}

	private static String escape(String content) {
	// @formatter:off
	return content.replace("&", "&")
	.replace("\t", "  ")
	.replace("<", "<")
	.replace(">", ">")
	.replace(" ", " ")
	.replace("'", "'")
	.replace("\"", """)
	.replace("\r\n", "\n")
	.replace("\n", "<br>");
	// @formatter:on
	}
	}