.Net使用SuperSocket框架實現(xiàn)WebSocket前端
本文內(nèi)容是搭配后端使用的,沒看過WebSocket后端實現(xiàn)的童鞋們戳這里
咳咳,其實前端實現(xiàn)相對就容易很多了,因為我們有JavaScript WebSocket Api,它看上來大致是這樣的:
var ws = '';//WebSocket對象
var userName = '測試同學' + parseInt(Math.random(1) * 888);//用戶名
//初始化連接
function connect() {
var address = "ws://127.0.0.1:10086";//服務端地址
ws = new WebSocket(address);//實例化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,它可以在收到服務端信息時做出響應——然后你就可以為所欲為了。
該方法返回的信息存儲在e.data內(nèi),內(nèi)容取決于你的服務端如何編寫(這里視作返回Json)。
關(guān)鍵之二:ws.send(),它可以發(fā)送信息到你編寫的服務端(至于內(nèi)容,依然取決于你后端如何實現(xiàn))。
關(guān)鍵之三:ws.onopen(),通過它可以打開與服務端的溝通(要設置好WebSocket對象)。
下面是實現(xiàn)的效果(很丑勿吐槽):

記得要找支持H5的瀏覽器哦~
到此這篇關(guān)于.Net使用SuperSocket框架實現(xiàn)WebSocket前端的文章就介紹到這了。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
.net Core連接MongoDB數(shù)據(jù)庫的步驟詳解
這篇文章主要給大家介紹了關(guān)于.net Core連接MongoDB數(shù)據(jù)庫步驟的相關(guān)資料,文中將實現(xiàn)的步驟一步步介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧。2018-02-02
EF?Core項目中不同數(shù)據(jù)庫需要的安裝包介紹
這篇文章介紹了EF?Core項目中不同數(shù)據(jù)庫需要的安裝包,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
ASP.NET MVC中jQuery與angularjs混合應用傳參并綁定數(shù)據(jù)
這篇文章主要介紹了ASP.NET MVC中jQuery與angularjs混合應用傳參并綁定數(shù)據(jù),需要的朋友可以參考下2017-06-06
.net中如何以純二進制的形式在內(nèi)存中繪制一個對象
這篇文章主要介紹了如何以純二進制的形式在內(nèi)存中繪制一個對象,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
asp.net 利用IIS的404錯誤將文件重寫成目錄的簡單方法
為什么要把文件重寫成目錄,主要原因是討好搜索引擎,至于為什么寫成目錄搜索引擎就比較容易搜錄不在本文討論范圍之內(nèi)。2009-09-09
.Net?WebApi中實現(xiàn)自動依賴注入的三種方法(最新推薦)
依賴關(guān)系注入 (DI) ,是一種軟件設計模式,這是一種在類及其依賴項之間實現(xiàn)控制反轉(zhuǎn) (IoC)?的技術(shù), .NET 中的依賴關(guān)系注入是框架的內(nèi)置部分,與配置、日志記錄和選項模式一樣,這篇文章主要介紹了.Net?WebApi中實現(xiàn)自動依賴注入的三種方法,需要的朋友可以參考下2024-03-03

