.Net Core SignalR+LayUi(1)-简单入门

本系列主要开发客服聊天系统的总结。

基于.Net Core2.2 +SignalR+Layui实现的人对人聊天功能

SignalR简介

SignalR是一个.Net Core/.Net Framework的开源框架，实现了客户端和服务器端实时通讯。封装了WebSocket,ForeverFrame,ServerSentEvents,LongPolling四种主要的传输协议，让浏览器自行选择兼容的版本，解决了webSocket兼容性问题。

详细介绍参考：  http://www.asp.net/signalr/overview/getting-started/tutorial-getting-started-with-signalr

 

页面效果：

PC端：前端样式采用的Layui,后端用的.net Core 2.2框架。主要功能包括:聊天客户列表，一对一聊天（文字/图片），新消息提醒，聊天记录保存等功能。

 

 移动App:基于Vue和Vant组件库，主要功能包括客服列表，聊天列表，在线聊天功能

1.使用模板新建一个.net core2.2的web项目

2.建立一个SignalrHubs,继承于Hub。

Hub基于永久连接之上更高层的封装，允许客户端和服务器端自定义方法并相互调用

public class SignalrHubs : Hub
{
        private readonly IRepository<Frame_User> _repository;
        //构造器
        public SignalrHubs(IRepository<Frame_User> repository )
        {
            _repository = repository;
           
        }
         //给客服发送消息
     public async Task TalkToCaller(string callerid, string clienterid, string message)
        {
            //保存聊天记录
            AddChatHistory(callerid, clienterid, message, false);
            //给对应客服发送消息
            await Clients.User(callerid).SendAsync("ReceiveMessage", callerid, clienterid,  message,                          "NickName",DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")); 
        }
}

3.配置SignalR

在Startup中注册SignalR

//ConfigureServices      
    services.AddSignalR(huboptions =>
            {
                //显示服务器错误的详细信息
                huboptions.EnableDetailedErrors = true;
                //间隔时长 1分钟
                //huboptions.KeepAliveInterval = TimeSpan.FromMinutes(1);
            });
//Configure
           app.UseSignalR(routes =>
            {
                routes.MapHub<SignalrHubs>("/api/SignalrHubs"); 16             });

4.建立连接，发送和接收消息

 <script src="~/lib/jquery/dist/jquery.js"></script>
 <script src="~/lib/SingnlR/signalr.js"></script>
  <script type="text/javascript">
   var hostUrl = "http://localhost:3090";
  const connection = new signalR.HubConnectionBuilder().withUrl( 
  hostUrl+"/api/SignalrHubs?userid="+userid).build();
  $(function () {
            
             //建立连接
             connection.start().catch(err => console.error(err.toString()));
            //接收客户消息
            connection.on("ReceiveMessage", (callerid, clientid, message,clientname,sendtime) => {
                //提示音播放
                playSound();
                //更新用户信息
                var picurl=UpdateUser(clientid);
                //更新左侧客户最新聊天记录
                UpClientTopContent(clientid, message, clientname, sendtime, picurl);
                //更新右侧聊天明细
                AppendContent(clientid, message,0);
            });
            //发送消息
            $(".FaSong").click(function () {
                if (chooseuserid == "") {
                    layer.msg('请选择客户！');
                    return;
                }
                var text = $(".text").val();
                if (text == "") {
                    layer.msg('请输入消息！');
                    return;
                } 
                //更新右侧聊天明细
                AddContentChat(chooseuserid, text);
            });       

  });
</script>