netcore vue socket.io

一、后端

1. 創建項目

   # 添加解決方案
   > dotnet new sln -n Apricot.Socket.IO
   
   # 添加 asp net core 項目
   > dotnet new web -n Apricot.Socket.IO
   
   # 將 web 項目添加至解決方案
   > dotnet sln add Apricot.Socket.IO/Apricot.Socket.IO.csproj
   

2. 安裝依賴

   >  dotnet add package SocketIOSharp --version 2.0.3
   

3. 配置服務

   using var server = new SocketIOServer(new SocketIOServerOption(9001));
   
    Console.WriteLine("Listening on " + server.Option.Port);
   
    // Handle client connections
    server.OnConnection((socket) =>
    {
        Console.WriteLine("Client connected!");
   
        // on "readFile" event
        socket.On("readFile", async (JToken[] data) =>
        {
            Console.WriteLine($"start: {DateTime.Now:mm:ss.fff}");
   
            using var fileStream = System.IO.File.OpenRead("C:\\Users\\Administrator\\Desktop\\2fdda3cc7cd98d1001e9f6a7b36eaf0e7bec54e73a51.jpg");
   
            var memeoryStream = new MemoryStream();
   
            await fileStream.CopyToAsync(memeoryStream);
   
            var buffer = memeoryStream.ToArray();
   
            Console.WriteLine($"emit: {DateTime.Now:mm:ss.fff}");
   
            socket.Emit("readfile", new
            {
                Code = 200,
                Data = Convert.ToBase64String(buffer)
            });
   
            Console.WriteLine($"end: {DateTime.Now:mm:ss.fff}");
        });
   
        // on "error" event
        socket.On("error", () =>
        {
            throw new Exception("Test exception from server.");
        });
   
        // on "disconnect" event
        socket.On(SocketIOEvent.DISCONNECT, () =>
        {
            Console.WriteLine("Client disconnected!");
        });
   
        // Emit "echo" event to client
        socket.Emit("echo", new byte[] { 0, 1, 2, 3, 4, 5 });
    });
   
    // Start the server
    server.Start();
   
    Console.WriteLine("Input /exit to exit program.");
    string line;
   
    while (!(line = Console.ReadLine())?.Trim()?.ToLower()?.Equals("/exit") ?? false)
    {
        server.Emit("echo", line);
    }
   
    Console.WriteLine("Press enter to continue...");
    Console.Read();
   

4. 運行服務

   > dotnet run Apricot.Socket.IO/Apricot.Socket.IO.csproj
   

5. 運行截圖

   

6. 參考

   • SocketIOSharp

二、前端

1. 創建項目

   > vue create apricot-socket.io
   

2. 安裝依賴，注意：高版本不支持。

   > npm install socket.io-client@2.3.0 --save
   

3. 編寫代碼

   <template>
    <div class="hello">
        <label for="socket.io-client">socket.io-client</label>：
        <input
        name="socket.io-client"
        type="button"
        value="socket.io-client"
        v-on:click="client"
        />
    </div>
    </template>
   
   
    <script>
    // socket io client
    var socket = require("socket.io-client")("http://localhost:9001/");
   
    const formatter = new Intl.DateTimeFormat("zh-CN", {
    year: "numeric",
    month: "long",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    fractionalSecondDigits: 3, // 包含毫秒
    hour12: false, // 使用24小時制
    });
   
    export default {
    name: "HelloWorld",
    components: {},
    computed: {},
    created() {
        // socket client connection
        socket.on("connection", function () {
        console.log("connected!");
        socket.emit("input", "asdasdg");
        });
   
        // socket client error
        socket.on("error", function (error) {
        console.log("error!"), error;
        socket.emit("error", "asdasdg");
        });
   
        // socket client echo
        socket.on("echo", function (data) {
        console.log("echo : " + data);
        });
   
        // socket client disconnect
        socket.on("disconnect", function () {
        console.log("disconnected!");
        });
   
        // socket client readfile
        socket.on("readfile", function (data) {
        var now = new Date();
   
        console.log("received:", formatter.format(now));
        console.log("echo : " + JSON.stringify(data));
        });
   
        console.log("input /exit to exit program.");
   
        // client to server
        socket.connect();
    },
    props: {
        msg: String,
        formatter: Intl.DateTimeFormat,
    },
    methods: {
        // eslint-disable-next-line
        client(event) {
        var now = new Date();
   
        console.log("send:", formatter.format(now));
        socket.emit("readFile", { fileName: "123.txt" });
        },
    },
    };
    </script>
   
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
    margin: 40px 0 0;
    }
    ul {
    list-style-type: none;
    padding: 0;
    }
    li {
    display: inline-block;
    margin: 0 10px;
    }
    a {
    color: #42b983;
    }
    </style>
   
   

4. 發送數據
   
5. 參考
   • SocketIOSharp Example Client.js
   • 本文源碼