欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

.Net使用SuperSocket框架实现WebSocket前端

程序员文章站 2022-03-01 13:21:56
本文内容是搭配后端使用的,没看过websocket后端实现的童鞋们咳咳,其实前端实现相对就容易很多了,因为我们有javascript websocket api,它看上来大致是这样的:var ws =...

本文内容是搭配后端使用的,没看过websocket后端实现的童鞋们

咳咳,其实前端实现相对就容易很多了,因为我们有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;
        }
    };
    //发生错误时
    ws.onerror = function (e) {
 
    };
    //连接关闭时
    ws.onclose = function (e) {
        $('#msgbox').append('<p>与聊天室的连接已断开。</p>');
    };
}
 
//公聊发送
function send() {
    var sendtext = $('#send').val();
    ws.send('[send]{"msg":"' + sendtext + '","user":"' + username + '"}');
}

这些东西是固定的,记就行了~简单解释下:

关键之一:ws.onmessage,它可以在收到服务端信息时做出响应——然后你就可以为所欲为了。

该方法返回的信息存储在e.data内,内容取决于你的服务端如何编写(这里视作返回json)。

关键之二:ws.send(),它可以发送信息到你编写的服务端(至于内容,依然取决于你后端如何实现)。

关键之三:ws.onopen(),通过它可以打开与服务端的沟通(要设置好websocket对象)。

下面是实现的效果(很丑勿吐槽):

.Net使用SuperSocket框架实现WebSocket前端

记得要找支持h5的浏览器哦~

到此这篇关于.net使用supersocket框架实现websocket前端的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持。