netcore vue socket.io

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 connectionsserver.OnConnection((socket) =>{Console.WriteLine("Client connected!");// on "readFile" eventsocket.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" eventsocket.On("error", () =>{throw new Exception("Test exception from server.");});// on "disconnect" eventsocket.On(SocketIOEvent.DISCONNECT, () =>{Console.WriteLine("Client disconnected!");});// Emit "echo" event to clientsocket.Emit("echo", new byte[] { 0, 1, 2, 3, 4, 5 });});// Start the serverserver.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>：<inputname="socket.io-client"type="button"value="socket.io-client"v-on:click="client"/></div></template><script>// socket io clientvar 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 connectionsocket.on("connection", function () {console.log("connected!");socket.emit("input", "asdasdg");});// socket client errorsocket.on("error", function (error) {console.log("error!"), error;socket.emit("error", "asdasdg");});// socket client echosocket.on("echo", function (data) {console.log("echo : " + data);});// socket client disconnectsocket.on("disconnect", function () {console.log("disconnected!");});// socket client readfilesocket.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 serversocket.connect();},props: {msg: String,formatter: Intl.DateTimeFormat,},methods: {// eslint-disable-next-lineclient(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. 发送数据