Web端在线实时聊天，基于WebSocket（前后端分离）

这是一个简易的Demo，已经实现了基础的功能

之前一直想实现一个实时聊天的系统，一直没有去实践他。有一天吃饭的时候扫码点菜，几个人点菜能够实时更新，当时就在想，这应该是同一种技术。

刚好前段时间项目上用到了mqtt和signalR。现在抽个时间自己在梳理一遍。

下面是效果

直接上代码。

后端是WebApi项目，.NET Framework 4.5

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Net.WebSockets;
using System.Web;
using System.Web.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;

namespace StudentSys.WebApi.Controllers
{
    /// <summary>
    /// 离线消息
    /// </summary>
    public class MessageInfo
    {
        public MessageInfo(DateTime _MsgTime, ArraySegment<byte> _MsgContent)
        {
            MsgTime = _MsgTime;
            MsgContent = _MsgContent;
        }
        public DateTime MsgTime { get; set; }
        public ArraySegment<byte> MsgContent { get; set; }
    }

    [RoutePrefix("api/socket")]
    public class WebSocketController : ApiController
    {
        private static Dictionary<string, WebSocket> CONNECT_POOL = new Dictionary<string, WebSocket>();//用户连接池
        private static Dictionary<string, List<MessageInfo>> MESSAGE_POOL = new Dictionary<string, List<MessageInfo>>();//离线消息池

        [HttpGet]
        [Route("connect")]
        public HttpResponseMessage Connect()
        {
            //在服务端接受web socket请求，传入的函数作为web socket的处理函数，待web socket建立后该函数会被调用，
            //在该函数中可以对web socket进行消息收发
            HttpContext.Current.AcceptWebSocketRequest(ProcessChat);
            //构造同意切换至web socket的response
            return Request.CreateResponse(HttpStatusCode.SwitchingProtocols);
        }

        private async Task ProcessChat(AspNetWebSocketContext context)
        {
            WebSocket socket = context.WebSocket;
            string user = context.QueryString["userid"].ToString();

            try
            {
                #region 用户添加连接池
                //第一次open时，添加到连接池中
                if (!CONNECT_POOL.ContainsKey(user))
                    CONNECT_POOL.Add(user, socket);//不存在，添加
                else
                    if (socket != CONNECT_POOL[user])//当前对象不一致，更新
                    CONNECT_POOL[user] = socket;
                #endregion

                #region 离线消息处理
                if (MESSAGE_POOL.ContainsKey(user))
                {
                    List<MessageInfo> msgs = MESSAGE_POOL[user];
                    foreach (MessageInfo item in msgs)
                    {
                        await socket.SendAsync(item.MsgContent, WebSocketMessageType.Text, true, CancellationToken.None);
                    }
                    MESSAGE_POOL.Remove(user);//移除离线消息
                }
                #endregion

                string descUser = string.Empty;//目的用户
                while (true)
                {
                    if (socket.State == WebSocketState.Open)
                    {
                        ArraySegment<byte> buffer = new ArraySegment<byte>(new byte[2048]);
                        WebSocketReceiveResult result = await socket.ReceiveAsync(buffer, CancellationToken.None);

                        #region 消息处理（字符截取、消息转发）
                        try
                        {
                            #region 关闭Socket处理，删除连接池
                            if (socket.State != WebSocketState.Open)//连接关闭
                            {
                                if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);//删除连接池
                                break;
                            }
                            #endregion

                            string userMsg = Encoding.UTF8.GetString(buffer.Array, 0, result.Count);//发送过来的消息
                            string[] msgList = userMsg.Split('|');
                            if (msgList.Length == 2)
                            {
                                if (msgList[0].Trim().Length > 0)
                                    descUser = msgList[0].Trim();//记录消息目的用户
                                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(msgList[1]));
                            }
                            else
                                buffer = new ArraySegment<byte>(Encoding.UTF8.GetBytes(userMsg));

                            if (CONNECT_POOL.ContainsKey(descUser))//判断客户端是否在线
                            {
                                WebSocket destSocket = CONNECT_POOL[descUser];//目的客户端
                                if (destSocket != null && destSocket.State == WebSocketState.Open)
                                    await destSocket.SendAsync(buffer, WebSocketMessageType.Text, true, CancellationToken.None);
                            }
                            else
                            {
                                Task.Run(() =>
                                {
                                    if (!MESSAGE_POOL.ContainsKey(descUser))//将用户添加至离线消息池中
                                        MESSAGE_POOL.Add(descUser, new List<MessageInfo>());
                                    MESSAGE_POOL[descUser].Add(new MessageInfo(DateTime.Now, buffer));//添加离线消息
                                });
                            }
                        }
                        catch (Exception exs)
                        {
                            //消息转发异常处理，本次消息忽略 继续监听接下来的消息
                        }
                        #endregion
                    }
                    else
                    {
                        break;
                    }
                }//while end
            }
            catch (Exception ex)
            {
                //整体异常处理
                if (CONNECT_POOL.ContainsKey(user)) CONNECT_POOL.Remove(user);
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

前端是vue项目

<template>
  <div class="page">
    <van-cell-group>
      <van-field v-model="userid" label="你的昵称" placeholder="请输入" />
    </van-cell-group>
    <van-button plain type="info" @click="lianjie" size="mini"
      >开始聊天</van-button
    >
    <van-button plain type="info" @click="btnDisconnect" size="mini"
      >关闭聊天</van-button
    >

    <van-cell-group>
      <van-field v-model="party_userid" label="对方昵称" placeholder="请输入" />
    </van-cell-group>
    <van-field
      v-model="sendstr"
      center
      clearable
      label="消息"
      placeholder="请输入内容"
      type="textarea"
      maxlength="50"
      show-word-limit
    >
      <template #button>
        <van-button type="primary" @click="btnSend" size="mini"
          >发送</van-button
        >
      </template>
    </van-field>

    <!-- 消息 -->
    <van-divider
      :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
    >
      消息
    </van-divider>
    <van-steps direction="vertical">
      <van-step v-for="item in news" :key="item.time">
        <h3>{{ item.text }}</h3>
        <p>{{ item.time }}</p>
      </van-step>
    </van-steps>
  </div>
</template>

<script>
var ws;
export default {
  data() {
    return {
      userid: "",
      party_userid: "",
      sendstr: "",

      news: [],
    };
  },
  methods: {
    lianjie() {
      let url = "ws://47.100.30.65/MobileGadgetsApi/api/socket/connect";
      ws = new WebSocket(`${url}?userid=${this.userid}`);

      let that = this;
      ws.onopen = function () {
        // Toast("提示内容");
        console.log("Connected!");
      };
      ws.onmessage = function (result) {
        console.log(result);
        that.news.unshift({
          text: result.data,
          time: that.$moment().format("YYYY-MM-DD HH:mm:ss"),
        });
      };
      ws.onerror = function (error) {
        console.log("error");
        console.log(error);
        console.log(error.data);
        console.log("errorend");
      };
      ws.onclose = function () {
        console.log("Disconnected!");
      };
    },

    btnDisconnect() {
      ws.close();
    },

    btnSend() {
      if (ws.readyState == WebSocket.OPEN) {
        ws.send(`${this.party_userid}|${this.sendstr}`);
      } else {
        console.log("Connection is Closed!");
        // $("messageSpan").text("Connection is Closed!");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
</style>