Asp.net MVC中实现即时通讯聊天的功能。前几天刚写了一片基础入门的教程,今天就来实现一下使用signaIr实现一对一的聊天的功能,对于这种场景也是即时通讯最基本功能。好吧废话不多说。先来看一下最终实现的效果图:

首先我们先搭建好环境,如果不熟悉,看下前面写的一片文章 MVC中使用signalR入门教程

接着:我们就开始写UserHub.cs 集线器类

主要的步骤就是要:

1. 重写OnConnected连接方法和OnDisconnected断开方法

2.服务器端方法 SendMessage 发送消息 ,GetName获取用户名

3.客户端响应的提示返回信息方法,比如Clients.Client(Context.ConnectionId).addMessage(message) .等等

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.ComponentModel.DataAnnotations;
using System.Threading.Tasks;
using Newtonsoft.Json;
using Microsoft.AspNet.SignalR.Hubs; namespace SignaIrOneOnOneDemo
{ [HubName("UserHub")]
public class UserHub : Hub
{
public static List<User> users = new List<User>(); //发送消息
public void SendMessage(string connectionId ,string message)
{
Clients.All.hello();
var user = users.Where(s => s.ConnectionID == connectionId).FirstOrDefault();
if (user != null)
{
Clients.Client(connectionId).addMessage(message + "" + DateTime.Now, Context.ConnectionId);
//给自己发送,把用户的ID传给自己
Clients.Client(Context.ConnectionId).addMessage(message + "" + DateTime.Now, connectionId);
}
else
{
Clients.Client(Context.ConnectionId).showMessage("该用户已离线");
}
}
[HubMethodName("exitChat")]
public void GetName(string name)
{
//查询用户
var user = users.SingleOrDefault(u => u.ConnectionID == Context.ConnectionId);
if (user != null)
{
user.Name = name;
Clients.Client(Context.ConnectionId).showId(Context.ConnectionId);
}
GetUsers();
} /// <summary>
/// 重写连接事件
/// </summary>
/// <returns></returns>
public override Task OnConnected()
{
//查询用户
var user = users.Where(w => w.ConnectionID == Context.ConnectionId).SingleOrDefault();
//判断用户是否存在,否则添加集合
if (user == null)
{
user = new User("", Context.ConnectionId);
users.Add(user);
}
return base.OnConnected();
}
public override Task OnDisconnected(bool stopCalled)
{
var user = users.Where(p => p.ConnectionID == Context.ConnectionId).FirstOrDefault();
//判断用户是否存在,存在则删除
if (user != null)
{
//删除用户
users.Remove(user);
}
GetUsers();//获取所有用户的列表
return base.OnDisconnected(stopCalled);
}
//获取所有用户在线列表
private void GetUsers()
{
var list = users.Select(s => new { s.Name, s.ConnectionID }).ToList();
string jsonList = JsonConvert.SerializeObject(list);
Clients.All.getUsers(jsonList);
}
}
public class User
{
[Key]
public string ConnectionID { get; set; }
public string Name { get; set; }
public User(string name, string connectionId)
{
this.Name = name;
this.ConnectionID = connectionId;
}
}
}

然后我们来看一下前端页面是怎么写的

@{
ViewBag.Title = "UserChat";
Layout = null;
}
<h2>UserChat</h2>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
var clients = [];
var chat;
$(function () { chat = $.connection.UserHub;
console.info(chat);
//显示提示方法
chat.client.showMessage = function (message) {
alert(message);
}
//注册显示信息的方法
chat.client.addMessage = function (message, connectionId) {
debugger
if ($.inArray(connectionId, clients)==-1) {
showWin(connectionId);
}
$("#" + connectionId).find("ul").each(function () {
$(this).append('<li>'+message+'</li>');
})
}
//注册显示所有用户的方法
chat.client.getUsers = function (data) { if (data) {
var json = $.parseJSON(data); console.info(json);
$("#users").html(" ");
for (var i = 0; i < json.length; i++) {
var html = '<li>用户名:' + json[i].Name + '<button connectionId="' + json[i].ConnectionID + '" onclick="userChat(this)">聊天</button>';
$("#users").append(html);
}
}
}
//注册显示推出聊天提示的方法
chat.client.exitUser = function (data)
{
alert(data);
}
//注册显示个人信息的方法
chat.client.showId = function (data)
{
$("#conId").html(data);
clients.push(data);
}
//获取用户名称
$('#userName').html(prompt('请输入您的名称', '')); //连接成功后获取自己的信息
$.connection.hub.start().done(function () {
chat.server.getName($('#userName').html());
});
});
//开始聊天
function userChat(obj)
{
var connectionId = $(obj).attr('connectionId');
showWin(connectionId);
}
function showWin(connectionId)
{
//var connectionId = $(obj).attr('connectionId');
clients.push(connectionId);
var html = '<div style="float:left;margin-left:30px;border:double" id="' + connectionId + '" connectionId="' + connectionId + '">' + connectionId + '"的房间聊天记录如下:<button onclick="exitChat(this)">退出</button><ul></ul><input type="text" /> <button onclick="sendMessage(this)">发送</button></div>';
$("#userBox").append(html);
}
function exitChat(btnObj)
{
debugger
// var connectionId = $(btnObj).parent().attr("connectionId");
$(btnObj).parent().remove();
//chat.server.exitChat(connectionId);
}
//发送消息
function sendMessage(data)
{
var message = $(data).prev().val();
var userObj = $(data).parent();
var username = $("#userName").html();
message = username + ":" + message;
console.info($(userObj).attr("connectionId"));
var targetConnectionId = $(userObj).attr("connectionId");
chat.server.sendMessage(targetConnectionId, message);
$(data).prev().val("");
}
</script>
<div>
<div>名称:<p id="userName"></p></div>
<div>ConnectionID:<p id="conId"></p></div> <div style="width:25%;border:1px solid #ff0000">
<div>在线用户列表</div>
<ul id="users"></ul>
</div>
<div id="userBox">
</div>
</div>

一个signalr一对一聊天例子就完成了,我们来简单的分析一下吧:

Clients.Client(connectionId).addMessage() 此方法的作用就是客户端注册addMessage方法,向指定连接Id的客户端发送消息。一对一的聊天发送的消息也必须回发给自己,所以连接的Id可以通过Context.ConnectionId来获取。当然不用Client.Client(Context.ConnectionId) ,也可以使用Client.Caller()方法直接发送

Client.Clients(IList<string> connectionIds) 这个方法的意思就是想一组string 的几个ConnectionId发送消息。类似于QQ上@好友的那种功能。

在谷歌浏览器中我们可以看到这些方法

可以很清楚的看到这个三个服务器端的方法,服务器端的方法名在客户端调用的时候都约定成了第一个字母小写了,但是可以通过方法上的特性HubMethodName进行标识。

这个集线器的UserHub也默认是第一个字母小写的,所以在前端写的时候要注意。源码下载地址:

作者:张林

标题:mvc中signalr实现一对一的聊天:http://blog.csdn.net/kebi007/article/details/53440242

转载随意注明出处

mvc中signalr实现一对一的聊天的更多相关文章

  1. 史上最全面的SignalR系列教程-5、SignalR 实现一对一聊天

    1.概述 通过前面几篇文章 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 史上最全面的Signa ...

  2. Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  3. 《ASP.NET SignalR系列》第五课 在MVC中使用SignalR

    接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET SignalR. 添加Signal ...

  4. Asp.NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  5. MVC中使用SignalR打造酷炫实用的即时通讯功能附源码

    前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时走的太急,忘记把代码拿出来.想想这已经是大半年前的事情了,时间过 ...

  6. 在 Asp.NET MVC 中使用 SignalR 实现推送功能

    一,简介Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Push)消息到客户端页面,这样客户端就不必重新发送请 ...

  7. MVC 中使用 SignalR 实现推送功能

    MVC 中使用 SignalR 实现推送功能 一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Pus ...

  8. MVC中使用SignalR

    MVC中使用SignalR打造酷炫实用的即时通讯功能附源码   前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...

  9. 在MVC中使用SignalR

    在MVC中使用SignalR 接着上一篇:<ASP.NET SignalR系列>第四课 SignalR自托管(不用IIS) 一.概述 本教程主要阐释了如何在MVC下使用ASP.NET Si ...

随机推荐

  1. vue+echarts 动态绘制图表以及异步加载数据

    前言 背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s (我这里用了淘宝镜像,不知道同学自 ...

  2. SSL/TLS 握手过程详解

    在现代社会,互联网已经渗透到人们日常生活的方方面面,娱乐.经济.社会关系等都离不开互联网的帮助.在这个背景下,互联网安全就显得十分重要,没有提供足够的安全保障,人们是不会如此依赖它的.幸运的是,在大牛 ...

  3. Centos7.0 下挂载磁盘

    参考:

  4. js计时函数实现秒表的开始-暂停-清零功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 16进制到byte转换

    我们经常会看到这样的语法 (byte) 0xAD 0xAD实际是个16进制,转换成二进制为:10101101,转换成10进制是:173,它是个正数 10101101只是int的简写,int由4个byt ...

  6. .net多线程应用

    昨天在部门分享.net多线程的一些内容,特此在博客记录下.内容如下: 进程与线程 1.什么是进程 进程是指在系统中正在运行的一个应用程序每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内 ...

  7. 计算器的单元测试dome

    通过上一篇文章,Appium环境已经搭建好了,下面我们通过Python脚本来测试原生的计算器程序 --------------------------------------------------- ...

  8. Hbuilder app开发,使用mui.ajax和服务器交互,后台获取不到值,显示null的解决方法

    先上一个能用的js代码: function login() { var uname=document.getElementById("username").value.trim() ...

  9. form表单参数传递和url参数传递的区别

    template: form表单: <form action="" method='GET'> <div class="input-group" ...

  10. 酷狗歌曲缓存kgtemp转mp3工具

    一直用网易音乐听歌,不过网易的歌曲版权确实是少了一些,在酷狗上可以找到,但收费歌曲只能试听不能下载. 寻找方案 从设置里可以看出,酷狗会设置缓存目录,试听的歌曲存放到这个缓存里. 打开缓存目录: 可以 ...