专栏首页Super 前端WebSocket-SockJS

WebSocket-SockJS

一、什么是SockJS

SockJS是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。 服务端:sockjs-node(https://github.com/sockjs/sockjs-node) 客户端:sockjs-clien(https://github.com/sockjs/sockjs-client) node-static(https://www.npmjs.com/package/node-static)是Node.js兼容HTTP静态文件服务器处理模块,提供内置的缓存支持。

二、实例

1. package.json(依赖)

{
	"name":"sockjsDemo",
	"version":"0.0.1",
	"dependencies":{
		"node-static":"0.5.9",
		"sockjs":"*"
	}
}

2. server.js(服务端)

/* 第1步:引入所需模块【http模块、sockjs模块、静态文件服务器处理模块】*/
var http = require('http');
var sockjs = require('sockjs');
var node_static = require('node-static');

/* 第2步:创建sockjs服务 */
var sockjs_opts = {sockjs_url:"http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"};
var sockjs_server = sockjs.createServer(sockjs_opts);
sockjs_server.on('connection',function(conn){
	conn.on('data',function(message){
		conn.write('我就不告诉你' + message);
	});
});

/* 第3步:指定静态服务文件目录 */
var static_directory = new node_static.Server(__dirname);

/* 第4步:传递http请求和响应给指定目录 */
var server = http.createServer();
server.addListener('request', function(req, res) {
    static_directory.serve(req, res);
});
server.addListener('upgrade', function(req, res){
    res.end();
});

/* 第5步:将sockjs服务挂载到http服务上 */
sockjs_server.installHandlers(server,{prefix:'/sockjsDemo'});

/* 第6步:指定监听端口和地址 */
console.log(' [*] Listening on 0.0.0.0:10086' );
server.listen(10086, '127.0.0.1');

3. index.html(客户端)

<!doctype html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/sockjs/1.0.1/sockjs.min.js"></script>
    <style>
      .box {
          width: 300px;
          float: left;
          margin: 0 20px 0 20px;
      }
      .box div, .box input {
          border: 1px solid;
          -moz-border-radius: 4px;
          border-radius: 4px;
          width: 100%;
          padding: 0px;
          margin: 5px;
      }
      .box div {
          border-color: grey;
          height: 300px;
          overflow: auto;
      }
      .box input {
          height: 30px;
      }
      h1 {
          margin-left: 30px;
      }
      body {
          background-color: #F0F0F0;
          font-family: "Arial";
      }
    </style>
</head>
<body lang="en">
    <h1>Index</h1>
    <div id="first" class="box">
      <div></div>
      <form><input autocomplete="off" value="Type here..."></input></form>
    </div>
    <script>
        var sockjs_url = '/sockjsDemo';
        var sockjs = new SockJS(sockjs_url);
        $('#first input').focus();

        var div  = $('#first div');
        var inp  = $('#first input');
        var form = $('#first form');

        var print = function(m, p) {
            p = (p === undefined) ? '' : JSON.stringify(p);
            div.append($("<code>").text(m + ' ' + p));
            div.append($("<br>"));
            div.scrollTop(div.scrollTop()+10000);
        };

        sockjs.onopen    = function()  {print('[*] open', sockjs.protocol);};
        sockjs.onmessage = function(e) {print('[.] message', e.data);};
        sockjs.onclose   = function()  {print('[*] close');};

        form.submit(function() {
            print('[ ] sending', inp.val());
            sockjs.send(inp.val());
            inp.val('');
            return false;
        });
    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript设计模式--迭代器模式

    迭代器模式是指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示。 JavaScript中的Array.prototype.for...

    奋飛
  • D3.js-散点图

    奋飛
  • JS数组&两值交换不使用第三变量

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    奋飛
  • (17)打鸡儿教你Vue.js

    router.start(App, '#app') 表示router会创建一个App实例

    达达前端
  • XSS攻击另类玩法

    今天小白就来讲一下大家都熟悉的 xss漏洞的攻击利用。相信大家对xss已经很熟悉了,但是很多安全人员的意识里 xss漏洞危害只有弹窗或者窃取cookie。但是x...

    奶糖味的代言
  • 春风创投合伙人毕磊:移动医疗下的颠覆式创新

        在9月15日晚举办的的第15期互联网前沿沙龙上,腾讯研究院高级研究员刘琼、丁香园董事长李天天、e陪诊CEO岳建雄、春风创投合伙人毕磊就如何把握“互联网...

    腾讯研究院
  • 除了聊天,我们还能在微信群里,干哪些正经事?

    今天,就不妨收下「知晓程序」精选的 5 个群工具小程序,让你在微信群中组织活动、投票、协作都不费吹灰之力。

    知晓君
  • Kotlin---集合与遍历

    同样在Kotlin中会有List、Map、Set,而与Java中数据结构大多相同,也略有区别。Kotlin中的集合分为可变集合与不可变集合。

    None_Ling
  • 早报:网贷资金存管规范出台:银行要为每个出借人、借款人开子账户

    1、现金贷洗牌:用户无力还款当老赖 首逾率已逼近50% “老赖”集结不还钱首逾逼近50% 坏账抬头,逾期风暴一触即发,平台催收与缩量、转型并举,服务商损失或达...

    用户1335017
  • 从 Masscan, Zmap 源码分析到开发实践

    Zmap和Masscan都是号称能够快速扫描互联网的扫描器,十一因为无聊,看了下它们的代码实现,发现它们能够快速扫描,原理其实很简单,就是实现两种程序,一个发送...

    知道创宇云安全

扫码关注云+社区

领取腾讯云代金券