如何使用XSockets在MVC中创建实时应用？求分步指南

嘿，我太懂你这种找不到靠谱参考案例的焦虑了！刚好我之前用VS2013 + .NET4.5在MVC里搭过XSockets实时应用，给你一份一步一步就能跑通的指南，跟着做绝对没问题：

• 打开VS2013，新建一个ASP.NET MVC 5项目，框架选.NET4.5，命名比如XSocketsMvcChatDemo
• 打开NuGet包管理器（右键项目→管理NuGet程序包），搜索并安装XSockets.AspNet和XSockets.Core——注意选兼容.NET4.5的稳定版本，别盲目装最新版

XSockets的控制器负责处理客户端的实时连接、消息收发，和MVC控制器逻辑类似但更专注实时场景：

1. 在项目里新建一个文件夹XSocketsControllers（方便归类）
2. 新建类ChatController.cs，代码如下：

using XSockets.Core.XSocket;
using XSockets.Core.XSocket.Helpers;
using System.Threading.Tasks;

namespace XSocketsMvcChatDemo.XSocketsControllers
{
    public class ChatController : XSocketController
    {
        /// <summary>
        /// 接收客户端发来的消息，广播给所有在线用户
        /// </summary>
        public async Task SendMessage(string message, string userName)
        {
            // 把消息推送给除了发送者之外的所有连接客户端
            await this.InvokeToAll(new { UserName = userName, Message = message }, "newMessage");
            // 如果要推送给包括发送者在内的所有人，直接用 this.InvokeToAll(...) 即可
        }
    }
}

要让XSockets服务和MVC项目一起启动，需要在全局配置里初始化：
打开Global.asax.cs，在Application_Start()方法里添加XSockets的启动代码：

using XSockets.AspNet;

protected void Application_Start()
{
    // 先启动XSockets服务，再执行MVC的初始化逻辑
    XSocketsAspNet.Start();
    
    AreaRegistration.RegisterAllAreas();
    RouteConfig.RegisterRoutes(RouteTable.Routes);
    // 其他原有代码（比如FilterConfig、BundleConfig）保持不变
}

另外检查下Web.config的appSettings节点，NuGet应该自动加了端口配置，要是没有就手动加：

<appSettings>
  <add key="XSockets.ServerPort" value="4502" /> <!-- 端口可以自己改，避免冲突 -->
</appSettings>

我们做一个简单的聊天室页面：

1. 在HomeController里添加一个Action：

public ActionResult Chat()
{
    return View();
}

2. 右键这个Action→添加视图，创建Chat.cshtml，代码如下：

@{
    ViewBag.Title = "实时聊天室";
}

<h2>@ViewBag.Title</h2>

<div class="chat-input">
    <input type="text" id="userName" placeholder="请输入你的昵称" />
    <input type="text" id="messageContent" placeholder="输入消息后点击发送" />
    <button id="sendBtn">发送消息</button>
</div>

<div id="messageList" style="margin-top:20px; padding:10px; border:1px solid #ccc; height:300px; overflow-y:auto;"></div>

@section Scripts {
    <!-- 引入XSockets客户端脚本，NuGet安装后会自动放到Scripts文件夹 -->
    <script src="~/Scripts/XSockets.latest.min.js"></script>
    <script>
        // 连接到XSockets的Chat控制器
        const socket = new XSockets.WebSocket('ws://localhost:4502/Chat');

        // 监听服务器推送的newMessage事件，展示收到的消息
        socket.on('newMessage', function(data) {
            const messageItem = document.createElement('div');
            messageItem.innerHTML = `<strong>${data.UserName}</strong>: ${data.Message}`;
            document.getElementById('messageList').appendChild(messageItem);
            // 自动滚动到最新消息
            document.getElementById('messageList').scrollTop = document.getElementById('messageList').scrollHeight;
        });

        // 绑定发送按钮的点击事件
        document.getElementById('sendBtn').addEventListener('click', function() {
            const userName = document.getElementById('userName').value.trim();
            const message = document.getElementById('messageContent').value.trim();

            if(userName && message) {
                // 调用服务器端ChatController的SendMessage方法
                socket.invoke('SendMessage', { message: message, userName: userName });
                // 清空输入框
                document.getElementById('messageContent').value = '';
            }
        });
    </script>
}

• 按F5启动项目，导航到/Home/Chat
• 再打开一个浏览器窗口（或者隐私模式窗口），同样进入这个页面
• 在两个窗口分别输入不同的昵称，发送消息，就能看到两边实时收到对方的消息啦！

一些注意事项 #

• 如果启动时报端口占用，修改Web.config里的XSockets.ServerPort换个端口就行
• 部署到IIS的话，需要IIS8及以上版本（因为要支持WebSocket），并且确保.NET4.5已安装
• 如果遇到连接失败，检查防火墙是否允许对应端口的WebSocket连接

内容的提问来源于stack exchange，提问作者Innocent Criminal