您的位置：首页 > 其它

SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升）

2016-03-04 13:25 465 查看

SignalR快速入门 ~ 仿QQ即时聊天，消息推送，单聊，群聊，多群公聊（基础=》提升，5个Demo贯彻全篇，感兴趣的玩才是真的学）

官方demo:http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

应用情景之一：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿QQ聊天--我是美女</title>
<link href="Style/MyQQ.css" rel="stylesheet" />
</head>
<body>
<div><input id="inputMsg" /><input id="btn" type="button" value="发消息" /></div><br /><br />
<div id="main"></div>

<script src="Scripts/jquery-2.2.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="http://localhost:5438/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
var rightHtml = [
'<div class="sender">',
'<div><img src="http://img.jfdown.com/jfdown/201403/ygald3wajct.jpg"></div>',
'<div><div class="left_triangle"></div>',
'<span>{msg}</span></div></div>'
].join('');

var leftHtml = [
'<div class="receiver">',
'<div><img src="http://tb.himg.baidu.com/sys/portrait/item/306c9328?t=1397975854"></div>',
'<div><div class="right_triangle"></div>',
'<span>{msg}</span></div></div>'
].join('');

//设置hubs的url
$.connection.hub.url = 'http://localhost:5438/signalR';
// 声明一个代理
var qqProxy = $.connection.qQHub;
// 创建一个方法供服务端调用
qqProxy.client.sendMsg = function (msg) {
$('#main').append(leftHtml.replace('{msg}',  msg));
}
// 启动 connection
$.connection.hub.start().done(function () {
qqProxy.server.online('妹子');//QQ昵称
$('#btn').click(function () {
//获取输入
var qqmsg = $('#inputMsg').val();
//给逆天发消息
qqProxy.server.serviceSend('逆天', qqmsg);
$('#main').append(rightHtml.replace('{msg}', qqmsg));
});
});
});
</script>
</body>
</html>

View Code

第三阶段

群发

我们先接着昨天的QQ聊天来说

这次用一个简单的方法搞定

一个键值对集合存放ConnectionId和GroupName

每个客户端连接的时候会加入一个组

断开的时候退出组

发消息

前端也进行了优化。ok，signalR第三个demo诞生，比昨天简单多了

下面可以说说类似于QQ群的群发消息了

继续码字ing

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航