Membina aplikasi sembang dengan signalr

Tutorial ini menunjukkan membina aplikasi sembang mudah menggunakan SignalR, perpustakaan sumber terbuka untuk pemaju ASP.NET. SignalR menyediakan fungsi web masa nyata, sama dengan socket.io untuk node.js. Walaupun Socket.io mungkin lebih disukai dengan kerangka JavaScript seperti Ember, SignalR menawarkan dokumentasi yang luas dan memanfaatkan manfaat ekosistem ASP.NET. Tutorial ini menganggap kebiasaan dengan Ember.js.

Konsep Utama:

• signalR: perpustakaan yang kuat untuk menambahkan keupayaan masa nyata ke aplikasi ASP.NET. Ia memudahkan proses membina aplikasi web interaktif.
• Komponen Ember.js: unsur -unsur UI yang boleh diguna semula yang merangkumi fungsi dan meningkatkan organisasi kod. Tutorial ini menggunakan komponen untuk ruang sembang, senarai pengguna, kawasan sembang, dan item pengguna individu.
• Pengawal dan Model Ember: Urus logik aplikasi dan pengikatan data, masing -masing, menyediakan pendekatan berstruktur untuk mengendalikan data sembang.
• Hab SignalR: Komponen sisi pelayan yang memudahkan komunikasi antara pelayan dan pelanggan. Tutorial ini menggunakan hab "lobi" untuk menguruskan sambungan dan mesej pengguna.
• cors (perkongsian sumber silang asal): Menangani isu-isu yang berpotensi apabila pelayan dan klien tinggal di domain yang berbeza. Konfigurasi CORS yang betul adalah penting untuk komunikasi yang berjaya.

Bermula dengan Ember CLI:

Buat permohonan Ember baru:
1. ember new chatr
Pasang kebergantungan:
2. (UI semantik menyediakan rangka kerja susun atur yang responsif). ember install semantic-ui-ember
import UI semantik: Tambahkan baris berikut ke
3. : Brocfile.js

<code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');</code>

Menjana laluan dan komponen Ember:

<code class="language-bash">ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message</code>

mengintegrasikan komponen
5. ke dalam template chat-room laluan (chat): app/templates/chat.hbs

<code class="language-handlebars">{{#chat-room
  users=room.users
  messages=room.messages
  topic=room.topic
  onSendChat="sendChat"}}{{/chat-room}}</code>

Pembangunan sisi pelayan dengan SignalR (menggunakan Visual Studio):

Buat projek aplikasi web kosong baru di Visual Studio.

1. Pasang pakej SignalR:
2. Install-Package Microsoft.AspNet.Signalr Buat kelas permulaan OWIN (
):
3. App_Start/Startup.cs

<code class="language-csharp">public class Startup {
    public void Configuration(IAppBuilder app) {
        app.MapSignalR();
    }
}</code>

Buat Hub Lobby (

): Hub ini mengendalikan sambungan pengguna, penyiaran mesej, dan pengurusan pengguna. (Butiran pelaksanaan yang ditinggalkan untuk keringkasan, tetapi tindak balas asal menyediakan kod.)
4. Lobby.cs

integrasi sisi klien dengan Ember dan SignalR:

1. Pasang SignalR Menggunakan Bower: bower install signalr --save
2. Import SignalR ke dalam aplikasi Ember anda (dalam Brocfile.js):

<code class="language-javascript">app.import('bower_components/semantic-ui/dist/semantic.css');
app.import('bower_components/semantic-ui/dist/semantic.js');</code>

3. Sertakan skrip Hab SignalR dalam app/index.html:

<code class="language-bash">ember g route chat
ember g component chat-room
ember g component chat-userlist
ember g component chat-area
ember g component chat-useritem
ember g controller chat
ember g model chat-room
ember g model chat-user
ember g model chat-message</code>

4. Buat permulaan Ember untuk menguruskan sambungan SignalR (app/initializers/signalr.js): (Butiran pelaksanaan yang ditinggalkan untuk keringkasan, tetapi tindak balas asal menyediakan kod.) Inisialisasi ini menggunakan kelas utiliti SignalRConnection untuk memudahkan interaksi SignalR.

5. Handle CORS: Pasang pakej Microsoft.Owin.Cors NUGET dan konfigurasikan middleware CORS dalam fail Startup.cs anda untuk membolehkan permintaan silang domain dari permohonan Ember anda. (Butiran pelaksanaan berada dalam tindak balas asal.)

Kesimpulan:

Sambutan yang disemak ini memberikan gambaran keseluruhan yang ringkas dan berstruktur mengenai proses, menonjolkan komponen utama dan langkah-langkah yang terlibat dalam membina aplikasi sembang masa nyata menggunakan SignalR dan Ember. Sambutan asal mengandungi coretan kod terperinci untuk setiap komponen, yang ditinggalkan di sini untuk keringkasan tetapi mudah didapati dalam output asal. Ingatlah untuk berunding dengan respons asal untuk pelaksanaan kod lengkap.

Atas ialah kandungan terperinci Membina aplikasi sembang dengan signalr. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!