.Net使用SuperSocket框架實(shí)現(xiàn)WebSocket前端

更新時(shí)間：2022年01月20日 09:07:52 作者：老馬-Max

這篇文章介紹了.Net使用SuperSocket框架實(shí)現(xiàn)WebSocket前端，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本文內(nèi)容是搭配后端使用的，沒(méi)看過(guò)WebSocket后端實(shí)現(xiàn)的童鞋們戳這里

咳咳，其實(shí)前端實(shí)現(xiàn)相對(duì)就容易很多了，因?yàn)槲覀冇蠮avaScript WebSocket Api，它看上來(lái)大致是這樣的：

var ws = '';//WebSocket對(duì)象
var userName = '測(cè)試同學(xué)' + parseInt(Math.random(1) * 888);//用戶名
//初始化連接
function connect() {
    var address = "ws://127.0.0.1:10086";//服務(wù)端地址
    ws = new WebSocket(address);//實(shí)例化WebSocket對(duì)象
    //開(kāi)始連接時(shí)
    ws.onopen = function (e) {
        ws.send('[login]{"userid":"' + userName + '"}');
    };
    //收到信息時(shí)
    ws.onmessage = function (e) {
        var Json = eval('(' + e.data + ')');
        switch (Json.type) {
            case '1':
                //新用戶連接時(shí)
                break;
            case '2':
                var Html = '';
                Html += '<p>';
                Html += Json.user + ':' + Json.msg;
                Html += '</p>';
                $('#msgBox').append(Html);
                break;
        }
    };
    //發(fā)生錯(cuò)誤時(shí)
    ws.onerror = function (e) {
 
    };
    //連接關(guān)閉時(shí)
    ws.onclose = function (e) {
        $('#msgBox').append('<p>與聊天室的連接已斷開(kāi)。</p>');
    };
}
 
//公聊發(fā)送
function send() {
    var SendText = $('#send').val();
    ws.send('[send]{"msg":"' + SendText + '","user":"' + userName + '"}');
}

這些東西是固定的，記就行了~簡(jiǎn)單解釋下：

關(guān)鍵之一：ws.onmessage,它可以在收到服務(wù)端信息時(shí)做出響應(yīng)——然后你就可以為所欲為了。

該方法返回的信息存儲(chǔ)在e.data內(nèi)，內(nèi)容取決于你的服務(wù)端如何編寫(xiě)（這里視作返回Json）。

關(guān)鍵之二：ws.send(),它可以發(fā)送信息到你編寫(xiě)的服務(wù)端（至于內(nèi)容，依然取決于你后端如何實(shí)現(xiàn)）。

關(guān)鍵之三：ws.onopen(),通過(guò)它可以打開(kāi)與服務(wù)端的溝通（要設(shè)置好WebSocket對(duì)象）。

下面是實(shí)現(xiàn)的效果（很丑勿吐槽）：

記得要找支持H5的瀏覽器哦~

到此這篇關(guān)于.Net使用SuperSocket框架實(shí)現(xiàn)WebSocket前端的文章就介紹到這了。希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

將文本文件的內(nèi)容或者文字保存成圖片的方法分享
這篇文章主要介紹了將文本文件的內(nèi)容或者文字保存成圖片的方法,需要的朋友可以參考下
2014-02-02
.net Core連接MongoDB數(shù)據(jù)庫(kù)的步驟詳解
這篇文章主要給大家介紹了關(guān)于.net Core連接MongoDB數(shù)據(jù)庫(kù)步驟的相關(guān)資料，文中將實(shí)現(xiàn)的步驟一步步介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
2018-02-02
EF?Core項(xiàng)目中不同數(shù)據(jù)庫(kù)需要的安裝包介紹
這篇文章介紹了EF?Core項(xiàng)目中不同數(shù)據(jù)庫(kù)需要的安裝包，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05
ASP.NET MVC中圖表控件的使用方法
這篇文章主要介紹了ASP.NET MVC中圖表控件的使用方法，需要的朋友可以參考下
2015-10-10
一步步做自己的webinstall安裝包
眾所周知，在VS環(huán)境下自帶的WEBINSTALL項(xiàng)目無(wú)法選擇安裝路徑，這讓很多開(kāi)發(fā)者頭痛不已。現(xiàn)提供一種辦法供大家參考
2012-10-10
asp.net后臺(tái)關(guān)閉當(dāng)前頁(yè)面并傳值的兩種方法
這篇文章介紹了asp.net后臺(tái)關(guān)閉當(dāng)前頁(yè)面并傳值的兩種方法，有需要的朋友可以參考一下
2013-10-10
ASP.NET MVC中jQuery與angularjs混合應(yīng)用傳參并綁定數(shù)據(jù)
這篇文章主要介紹了ASP.NET MVC中jQuery與angularjs混合應(yīng)用傳參并綁定數(shù)據(jù),需要的朋友可以參考下
2017-06-06
.net中如何以純二進(jìn)制的形式在內(nèi)存中繪制一個(gè)對(duì)象
這篇文章主要介紹了如何以純二進(jìn)制的形式在內(nèi)存中繪制一個(gè)對(duì)象,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
asp.net 利用IIS的404錯(cuò)誤將文件重寫(xiě)成目錄的簡(jiǎn)單方法
為什么要把文件重寫(xiě)成目錄，主要原因是討好搜索引擎，至于為什么寫(xiě)成目錄搜索引擎就比較容易搜錄不在本文討論范圍之內(nèi)。
2009-09-09
.Net?WebApi中實(shí)現(xiàn)自動(dòng)依賴注入的三種方法(最新推薦)
依賴關(guān)系注入 (DI) ,是一種軟件設(shè)計(jì)模式，這是一種在類及其依賴項(xiàng)之間實(shí)現(xiàn)控制反轉(zhuǎn) (IoC)?的技術(shù)， .NET 中的依賴關(guān)系注入是框架的內(nèi)置部分，與配置、日志記錄和選項(xiàng)模式一樣，這篇文章主要介紹了.Net?WebApi中實(shí)現(xiàn)自動(dòng)依賴注入的三種方法,需要的朋友可以參考下
2024-03-03