.Net使用SuperSocket框架實(shí)現(xiàn)WebSocket前端
本文內(nèi)容是搭配后端使用的,沒看過WebSocket后端實(shí)現(xiàn)的童鞋們戳這里
咳咳,其實(shí)前端實(shí)現(xiàn)相對就容易很多了,因?yàn)槲覀冇蠮avaScript WebSocket Api,它看上來大致是這樣的:
var ws = '';//WebSocket對象 var userName = '測試同學(xué)' + parseInt(Math.random(1) * 888);//用戶名 //初始化連接 function connect() { var address = "ws://127.0.0.1:10086";//服務(wù)端地址 ws = new WebSocket(address);//實(shí)例化WebSocket對象 //開始連接時 ws.onopen = function (e) { ws.send('[login]{"userid":"' + userName + '"}'); }; //收到信息時 ws.onmessage = function (e) { var Json = eval('(' + e.data + ')'); switch (Json.type) { case '1': //新用戶連接時 break; case '2': var Html = ''; Html += '<p>'; Html += Json.user + ':' + Json.msg; Html += '</p>'; $('#msgBox').append(Html); break; } }; //發(fā)生錯誤時 ws.onerror = function (e) { }; //連接關(guān)閉時 ws.onclose = function (e) { $('#msgBox').append('<p>與聊天室的連接已斷開。</p>'); }; } //公聊發(fā)送 function send() { var SendText = $('#send').val(); ws.send('[send]{"msg":"' + SendText + '","user":"' + userName + '"}'); }
這些東西是固定的,記就行了~簡單解釋下:
關(guān)鍵之一:ws.onmessage,它可以在收到服務(wù)端信息時做出響應(yīng)——然后你就可以為所欲為了。
該方法返回的信息存儲在e.data內(nèi),內(nèi)容取決于你的服務(wù)端如何編寫(這里視作返回Json)。
關(guān)鍵之二:ws.send(),它可以發(fā)送信息到你編寫的服務(wù)端(至于內(nèi)容,依然取決于你后端如何實(shí)現(xiàn))。
關(guān)鍵之三:ws.onopen(),通過它可以打開與服務(wù)端的溝通(要設(shè)置好WebSocket對象)。
下面是實(shí)現(xiàn)的效果(很丑勿吐槽):
記得要找支持H5的瀏覽器哦~
到此這篇關(guān)于.Net使用SuperSocket框架實(shí)現(xiàn)WebSocket前端的文章就介紹到這了。希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解.Net Core 權(quán)限驗(yàn)證與授權(quán)(AuthorizeFilter、ActionFilterAttribute)
這篇文章主要介紹了.Net Core 權(quán)限驗(yàn)證與授權(quán)(AuthorizeFilter、ActionFilterAttribute),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04.Net Core WebApi部署在Linux服務(wù)器上的方法
這篇文章主要介紹了.Net Core WebApi部署在Linux服務(wù)器上的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03asp.net下Oracle,SQL Server,Access萬能數(shù)據(jù)庫通用類
Oracle,SQL Server,Access萬能數(shù)據(jù)庫通用類!,使用asp.net開發(fā)多數(shù)據(jù)庫系統(tǒng)的朋友可以參考下。2010-10-10如何在Asp.Net Core MVC中處理null值的實(shí)現(xiàn)
這篇文章主要介紹了如何在Asp.Net Core MVC中處理null值的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12ASP.NET中實(shí)時圖表的實(shí)現(xiàn)方法分享
這篇文章介紹了ASP.NET中實(shí)時圖表的實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-11-11ASP.NET頁面某些選項(xiàng)進(jìn)行提示判斷具體實(shí)現(xiàn)
針對asp.net頁面某些選項(xiàng)進(jìn)行提示判斷,比如當(dāng)保存一個信息時候,需要對當(dāng)前信息是否為空進(jìn)行判斷2013-06-06ASP.NET?MVC5網(wǎng)站開發(fā)用戶登錄、注銷(五)
這篇文章主要介紹了ASP.NET?MVC5?網(wǎng)站開發(fā)中用戶登錄、注銷的實(shí)現(xiàn)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-09-09ASP.NET?Core中引用OpenAPI服務(wù)的添加示例
這篇文章主要為大家介紹了ASP.NET?Core中引用OpenAPI服務(wù)添加示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04