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

本文内容是搭配后端使用的，没看过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对象）。

下面是实现的效果（很丑勿吐槽）：

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

到此这篇关于.Net使用SuperSocket框架实现WebSocket前端的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • .NET Core 基于Websocket的在线聊天室实现

    什么是Websocket 我们在传统的客户端程序要实现实时双工通讯第一想到的技术就是socket通讯,但是在web体系是用不了socket通讯技术的,因为http被设计成无状态,每次跟服务器通讯完成后就会断开连接. 在没有websocket之前web系统如果要做双工通讯往往使用http long polling技术.http long polling 每次往服务器发送请求后,服务端不会立刻返回信息来结束请求,而是一直挂着直到有数据需要返回,或者等待超时了才会返回.客户端在结束上一次请求后立刻再发

  • .NET实现WebSocket服务端即时通信实例

    即时通信常用手段 1.第三方平台 谷歌.腾讯 环信等多如牛毛,其中谷歌即时通信是免费的,但免费就是免费的并不好用.其他的一些第三方一般收费的,使用要则限流(1s/限制x条消息)要么则限制用户数. 但稳定性什么都还不错,又能将服务压力甩出 2.System.Net.Sockets.Socket,也能写一套较好的服务器端.在.NET 4.5之前用较多,使用起来麻烦.需要对数据包进行解析等操作(但貌似网上有对超长包的处理方法) 3.System.Net.WebSockets.WebSocket,这个,

  • Asp.net Core中如何使用中间件来管理websocket

    介绍 我喜欢.NET CORE 这个东西,其实不仅仅源于它性能很高,可以跨平台,还因为它的设计模式确实令人着迷.以前没.NET CORE 的时候,.NET用websocket必须跑在windows server 2012上,但我一般不会这么干,都把websocket架在nodejs的服务器上.这么分出来,麻烦肯定是麻烦的,而且js这东西,写复杂和几年后再看都是头疼的问题.那么,如果.NET CORE是以kestrel运行的,那么就不再需要考虑服务器的版本运行,任何一个地方都可以用websocke

  • Asp.Net Core中WebSocket绑定的方法详解

    说明 Websocket是html5后的产物,对于asp.net core中也得到了支持,Asp.Net Core中WebScoket的操作使用基本上和Asp.net中相同,不同的是,绑定监听. Asp.Net Core2.0默认已经支持WebSocket,不需要另外安装Nuget包. 通过对HttpContext中的WebSockets.AcceptWebSocketAsync方法,接受WebSocket请求:并返回WebScoket对象. 下面话不多说了,来一起看看详细的介绍吧. 一.示例1

  • .Net使用SuperSocket框架实现WebSocket

    .Net使用SuperSocket框架实现WebSocket

    关于WebSocket其实很早就想发了,奈何之前项目中的WebSocket的后端不是我做的,而我又想前后端都发出来和大家讨论讨论~于是挤出点时间研究了一下WebSocket的后端实现(所以才有了这篇文章). 首先是概念导论,现在大家在百度.谷歌很容易就能搜索到一大堆这样的socket(百度百科).Socket详解(太多了就不一一列举) 看过这些概念导论以后,我们准备先实现WebSocket的服务端(基础概念都没掌握的童鞋们需要补课了). 说到.net的WebSocket实现,就不得不说Super

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

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

    本文内容是搭配后端使用的,没看过WebSocket后端实现的童鞋们戳这里 咳咳,其实前端实现相对就容易很多了,因为我们有JavaScript WebSocket Api,它看上来大致是这样的: var ws = '';//WebSocket对象 var userName = '测试同学' + parseInt(Math.random(1) * 888);//用户名 //初始化连接 function connect() { var address = "ws://127.0.0.1:10086&q

  • .Net使用SuperSocket框架实现WebSocket后端

    关于WebSocket其实很早就想发了,奈何之前项目中的WebSocket的后端不是我做的,而我又想前后端都发出来和大家讨论讨论~于是挤出点时间研究了一下WebSocket的后端实现(所以才有了这篇文章). 首先是概念导论,现在大家在百度.谷歌很容易就能搜索到一大堆这样的socket(百度百科).Socket详解(太多了就不一一列举) 看过这些概念导论以后,我们准备先实现WebSocket的服务端(基础概念都没掌握的童鞋们需要补课了). 说到.net的WebSocket实现,就不得不说Super

  • PHP框架实现WebSocket在线聊天通讯系统

    ThinkPHP使用Swoole需要安装 think-swoole Composer包,前提系统已经安装好了Swoole PECL 拓展 tp5的项目根目录下执行composer命令安装think-swoole: composer require topthink/think-swoole 话不多说,直接上代码: 新建WebSocket.php控制器: (监听端口要确认服务器放行,宝塔环境还需要添加安全组规则) <?php namespace app\home\controller; use t

  • Flask框架实现的前端RSA加密与后端Python解密功能详解

    Flask框架实现的前端RSA加密与后端Python解密功能详解

    本文实例讲述了Flask框架实现的前端RSA加密与后端Python解密功能.分享给大家供大家参考,具体如下: 前言 在使用 Flask 开发用户登录API的时候,我之前都是明文传输 username 和 password.这种传输方式有一定的安全隐患,password 可能会在传输过程中被窃听而造成用户密码的泄漏. 那么我认为解决该问题的方法是这样的:在前端页面对数据进行加密,然后再发送到后端进行处理. 这一篇文章是前端用 RSA 的 publicKey 进行加密,然后后端用 Python 进行

  • Laravel框架之解决前端显示图片问题

    最近做项目,功能是在用户上传图片成功后显示该图片,在本地测试(WAMP环境)下正常显示,但是部署到服务器上(LNMP)下无法显示. 因为LNMP环境下域名直接指向Laravel框架下的public目录,public为Laravel框架唯一对外公开的文件夹,而我的图片保存在storage/images,无法直接访问.查了官网文档发现可以在Linux下建立文件软链接,但试了以后没成功(可能是我打开的方式不对).而且这样做在WAMP下又不能显示图片了 最后,还是决定将图片保存在public/image

  • spring框架下websocket的搭建

    本文基于Apach Tomcat 8.0.3+MyEclipse+maven+JDK1.7 spring4.0以后加入了对websocket技术的支持,撸主目前的项目用的是SSM(springMVC+spring+MyBatis)框架,所以肯定要首选spring自带的websocket 1 在maven的pom.xml中加入websocket所依赖的jar包 <dependency> <groupId>com.fasterxml.jackson.core</groupId&g

  • C#SuperSocket的搭建并配置启动总结

    之前我们借助一个SuperSocket实现了一个简易版的服务器, 但是不管是Server还是Session都是使用框架的,本篇博客我们要实现自己的Server和Session,来重写框架原生的Server或Session的方法,或添加自己所需的属性,来实现自己的业务逻辑,并且也不在使用事件来绑定接收,连接,或关闭事件,全部交给Bootstrap来执行,(这个Bootstrap并不是指前端框架的Bootstrap ,而是指的SuperSocket框架的一个引导程序或说是辅助程序),就是这里我们会使

  • ajax与websocket的区别以及websocket常用使用方式 介绍

    笔者近期在公司的项目中渐渐的接触了一些比较高级的业务逻辑处理,其中比较有意思的地方就是前端接受后台给与的推送问题. 一般前端与后端的交互主要是使用ajax进行异步操作调用交互,比较有趣的是这种交互方式一般都是单项交互的-- -及前端给后端发出请求后端接受请求后执行操作,即便前端可以接受后端给予的返回值,但是与后端交互的主动权始终是放在前端手里面. 而这样就会遇到两个有意思的问题-- 1.前端如果调用的接口后端操作事件过长可能会导致返回操作响应时间过长,如果此时用户单击其他页面的时候就会导致返回操

  • Spring Boot 开发私有即时通信系统（WebSocket）

    Spring Boot 开发私有即时通信系统（WebSocket）

    1/ 概述 利用Spring Boot作为基础框架,Spring Security作为安全框架,WebSocket作为通信框架,实现点对点聊天和群聊天. 2/ 所需依赖 Spring Boot 版本 1.5.3,使用MongoDB存储数据(非必须),Maven依赖如下: <properties> <java.version>1.8</java.version> <thymeleaf.version>3.0.0.RELEASE</thymeleaf.ve

随机推荐