用SignalR和Layui搭建自己的web聊天网站

1.开发背景

之前是做项目一直有一个困扰，就是如何进行及时通讯，本人.Net开发，不太想用别人的接口，然后偶然的机会知道了SignalR，那么什么是SignalR呢？

2.SignalR简介

ASP.NET SignalR是ASP.NET开发人员的库，它简化了向应用程序添加实时Web功能的过程。实时Web功能是指服务器代码在连接的客户端可用时立即将内容推送到连接的客户端，而不是让服务器等待客户端请求新数据。

SignalR可用于向ASP.NET应用程序添加任何类型的“实时”Web功能。虽然聊天经常被用作示例，但您可以做更多的事情。每当用户刷新网页以查看新数据，或者页面实现长轮询以检索新数据时，它都是使用SignalR的候选者。示例包括仪表板和监视应用程序，协作应用程序（如同时编辑文档），作业进度更新和实时表单。

SignalR还支持全新类型的Web应用程序，这些应用程序需要来自服务器的高频更新，例如实时游戏。

SignalR提供了一个简单的API，用于创建从服务器端.NET代码调用客户端浏览器（和其他客户端平台）中的JavaScript函数的服务器到客户端远程过程调用（RPC）。SignalR还包括用于连接管理的API（例如，连接和断开事件）以及分组连接。

image.png

详情可以看一下微软的文档介绍，网址为https://www.asp.net/signalr,全英文，但是可以翻译一下。

 

3.创建一个MVC项目。

具体创建的过程我就不多做介绍了，https://www.asp.net/signalr这里面都有非常详细的介绍，还有一个demo，可以跟着一步一步做。
项目创建好之后，需要先把需要的NuGet包加进来，就是这个SignalR了，

image.png

或者在工具》NuGet包管理器》程序包管理控制台输入

 

install-package Microsoft.AspNet.SignalR

然后需要在添加两个类，一个永久连接类，一个集线器类。你可以在创建一个文件夹用来存放这两个类，或者直接放到App_Start文件下。两个类命名分别为Startup.cs 和 ChatHub.cs如下图所示。

 

image.png

 

我是之前添加过，所以直接显示到这里了。第一次添加的话，应该在这里。

 

image.png

添加好这两个类之后，咱们在稍稍做一下修改。打开ChatHub类，修改一下参数，代码为

using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message, string datetime, string receiver)
        {
            Clients.All.broadcastMessage(name, message, datetime, receiver);
        }
    }
}

这里四个参数 分别为，发送者姓名，发送消息内容，发送时间，以及接收者。
后台修改完了，接下来看页面，回到Index.cshtml，把原来的页面内容可以删了，样式的话我是参考的layui里面的LayIM。https://www.layui.com/demo/layim.html
主要是参考的这个页面。

image.png

layIM是收费的，所以至于这个页面的样式，只能靠自己了，首先F12，检查元素，看引入了哪几个css和js文件，然后把文件下载下来，然后分析页面样式，看怎么布局，都使用了什么标签，class名为什么，嗯，就这么简单就把样式copy下来了。当然还有一些地方需要自己动手修改。关键地方到了。页面处理好之后，就该写JS了，如何呢点击发送的时候，把消息发送出去呢？先看代码在讲吧。
这里现在需要先引入两个js。

 

    <script src="~/Scripts/jquery.signalR-2.3.0.min.js"></script>
    <script src="~/signalr/hubs"></script>

说实话，因为其中一个js，走了不少坑，就是这个hubs，这个文件在项目中是不存在的，只有在项目运行的时候，才会动态生成一个hubs文件，发送消息接收消息js代码如下。

  $(function () {
            var datetime = getNowFormatDate();
            var chat = $.connection.chatHub;
            chat.client.broadcastMessage = function (name, message, datetime, receiver) {  //发送人姓名  发送消息内容  发送时间  接收人姓名
                var sendname = name;
                var encodedMsg = message;
                var currentname = $("#name").text();//  当前登录系统的用户
                if (receiver == currentname) {   //接收人收到的消息
                    $('#chatarea').append('<li><div class="layim-chat-user"><img src="../Content/img/defaultpic.jpg"><cite>' + sendname + '<i>' + datetime + '</i></cite></div><div class="layim-chat-text">' + encodedMsg + '</div></li>');
                }
                else if (sendname == currentname) {
                    $('#chatarea').append('<li class="layim-chat-mine"><div class="layim-chat-user"><img src="../Content/img/defaultpic.jpg" /><cite><i>' + datetime + '</i>' + sendname + '</cite></div> <div class="layim-chat-text">' + encodedMsg + '</div> </li >');
                }
                // layui.form.render();
            };
            $.connection.hub.start().done(function () {
                $(document).keypress(function (e) {
                    if (e.keyCode == 13) {
                        $('#setSend').click();
                    }
                })
                $('#setSend').click(function () {
                    var current_id = $("#current_id").val();
                    if (current_id == "" || current_id == null) {
                        alert("请先选择聊天对象");
                        return false;
                    }
                    if ($("#txt_message").val() == "" || $("#txt_message").val() == null) {
                        alert("请输入聊天内容");
                    }
                    else {
                        chat.server.send($("#name").text(), $("#txt_message").val(), getNowFormatDate(), $("#current_id").val());   //发送人姓名  发送消息内容  发送时间  接收人姓名
                        setTimeout("$(\"#txt_message\").val('')", 0005);  //清空消息输入框
                        //$("#chatarea").children("div:last-child")[0].scrollIntoView(false);
                        document.getElementById("msg_end").scrollIntoView(true);
                    }

                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }

至于里面的发送机制，我并没过特别深入的研究，有感兴趣的同学，欢迎评论留言，最后放几张效果图。

 

登录页面

 

主页

Study hard and make progress every day.

获取源码请关注"爱游戏爱编程"。回复“聊天网站”即可获取

 

爱游戏爱编程.jpg