Hello Flask Socket.IO [4]


Hello Flask Socket.IO 系列文章四。本文延续文章三,基于 Flask Socket.IO 实现 Web 端聊天室 Demo,打通安卓手机和网页前端。

后续考虑把之前基于 ChatterBot 写的聊天机器人 ChatDroid 添加进来。

相关文章:
Hello Flask Socket.IO [1]
Hello Flask Socket.IO [2]
Hello Flask Socket.IO [3]
相关 Github 源码

版权声明:本文为 frendy 原创文章,可以随意转载,但请务必在明确位置注明出处。


这里先贴下 Demo 效果图吧:

image image image


服务器端


在文章三的时候我们已经实现了相关事件监听,这里只需要添加一个聊天室页面路由即可。未翻阅过文章三的同学可以点击这里

@app.route('/chat')
def chat():
	return render_template('chat.html')

Web 前端


添加 chat.html,跟 Android 前端类似,实现跟服务器端的交互。

1.主要的逻辑处理对应服务器端的三个监听,用于向服务器端发送消息:
// 加入房间
socket.on('connect', function() {
	socket.emit('joined', {name : uuid, room : '100'});
});
// 发送消息
$('#text').keypress(function(e) {
	var code = e.keyCode || e.which;
	if (code == 13) {
		text = $('#text').val();
		$('#text').val('');
		socket.emit('message', {message: text});
		...
	}
});
// 离开房间
socket.emit('left', {}, function() {
	socket.disconnect();
	...
});
2.主要的监听处理如下,用于响应服务器端发送过来的消息:
socket.on('_joined', function(data) {
	$('#chat').val($('#chat').val() + '<' + data.user_name + ' joined>\n');
	$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
socket.on('_left', function(data) {
	$('#chat').val($('#chat').val() + '<' + data.user_name + ' left>\n');
	$('#chat').scrollTop($('#chat')[0].scrollHeight);
});
socket.on('_message', function(data) {
	$('#chat').val($('#chat').val() + data.user_name + ' : ' + data.message + '\n');
	$('#chat').scrollTop($('#chat')[0].scrollHeight);
});


欢迎来撩

frendy

It will shine for us...