当前位置:网站首页 / Node.js / 正文

[AY-Node.js]写给自己的NodeJs-通讯系统-webSocket[2/2]【十】[23]

时间:2015年11月02日 | 作者 : aaronyang | 分类 : Node.js | 浏览: 1852次 | 评论 0

2015年11月2日          ====== AYUI www.ayjs.net AY 杨洋原创编写,请不要转载谢谢========

新建express项目,express中使用socket.io

blob.png

blob.png


然后修改下编码为 utf-8

然后把刚刚的socket.io拷贝到 node_modules中

blob.png

打开routes下的index.js文件,默认是里面的get('/')路由,然后render      下 views下的index.ejs

我们重新使用express,   var app=express();

var express = require('express');
var http=require('http');
var sio=require('socket.io');


var router = express.Router();
var app= express();
var server=http.createServer(app);


/* GET home page. */
app.get('/', function(req, res, next) {
  res.sendfile(__dirname+'/socketdemo2.html');
});
server.listen(1337);
var socket=sio.listen(server);
socket.on('connection', function (socket) {
  console.log('建立连接');
  socket.emit('msg',{name:'ay'}, function (data1,data2,data3) {
    console.log((data1+data2+data3));
  });
  socket.on('ayevent', function (data) {
    console.log('客户端触发了ayevent:%j',data);
  })

  socket.on('disconnect', function () {
    console.log('客户端断开连接');
  })
})

module.exports = router;

然后复制socketdemo2.html到routes下

运行项目,效果如下

blob.png


服务端set存储和get获得 在  "version": "1.3.7",版本中已经没有了额

还有其他用法参考socket.io文件夹下的Readme.md

blob.png

广播

效果,就是每个客户端发一句话,别人都能看的见

修改index.js文件,在服务端,当有多个客户端连上,socket.sockets对象就是那些连上的客户端socket,通过sockets.emit广播或者socket.broadcast

var express = require('express');
var http=require('http');
var router = express.Router();
var app= express();
var server=http.createServer(app);

/* GET home page. */
app.get('/', function(req, res, next) {
  res.sendFile(__dirname+'/socketall.html');
});

server.listen(1337);
var io=require('socket.io').listen(server);
var msgs=[];
io.sockets.on('connection', function (socket) {
  socket.emit('newMessage',msgs);
  socket.on('msg', function (data) {
    msgs.push(data);
    io.sockets.emit('newMessage',msgs);

    //等效
    //socket.emit('newMessage',msgs);
    //socket.broadcast.emit('msg',msgs);
  })
})

module.exports = router;

2015年11月2日          ====== AYUI www.ayjs.net AY 杨洋原创编写,请不要转载谢谢========

新建socketall.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ay的消息通知</title>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket=io.connect();
    socket.on('newMessage', function (msgs) {
        var m="";
        msgs.forEach(function (msg) {
            m+=msg+"<br/>";
        })
        document.getElementById('result').innerHTML=m;
    })

    socket.on('msg', function (msgs) {
        var m="";
        msgs.forEach(function (msg) {
            m+=msg+"<br/>";
        })
        document.getElementById('result').innerHTML=m;
    })

    function sendMsg(){
        socket.emit('msg',document.getElementById('msg').value)
    }
</script>
<body>
<div><span>输入消息</span>
    <input id="msg" type="text" width="120" height="26" />
    <input type="button" value="发送" onclick="sendMsg()"/></div>
<div id="result"></div>
</body>
</html>

效果图:

31.gif

命名空间的使用

如果你想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的'/'就够了,但是如果你需要将应用程序作为第三方服务 提供给其他应用程序,就需要为一个用于客户端连接的socket端口定义一个独立的命名空间。

在Socket.IO中,使用Socket.IO服务器对象的of方法定义命名空间

io.of(namesapce)  就是给socket取别名


下面我们服务端作为老师,客户端作为学生,做个学生向老师 打招呼的demo

修改index.js文件,hello是send方式发送消息,goodbye是互相调用自定义事件

var express = require('express');
var http=require('http');
var router = express.Router();
var app= express();
var server=http.createServer(app);

/* GET home page. */
app.get('/', function(req, res, next) {
  res.sendFile(__dirname+'/socketof.html');
});

server.listen(1337);
var io=require('socket.io').listen(server);
//var msgs=[];
//io.sockets.on('connection', function (socket) {
//  socket.emit('newMessage',msgs);
//  socket.on('msg', function (data) {
//    msgs.push(data);
//    io.sockets.emit('newMessage',msgs);
//
//    //等效
//    //socket.emit('newMessage',msgs);
//    //socket.broadcast.emit('msg',msgs);
//  })
//})

var hello=io.of('/hello').on('connection', function (socket) {
  socket.send('早上好');
  socket.on('message', function (name) {
    console.log('hello '+name);
  })
})


var goodbye=io.of('/goodbye').on('connection', function (socket) {
  socket.emit('goodbye','再见!');
  socket.on('goodbye', function (data) {
    console.log('再见! '+data);
  })
})







module.exports = router;

新建socketof.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ay的socket of别名</title>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
    var hello=io.connect('http://localhost:1337/hello');
    var goodbye=io.connect('http://localhost:1337/goodbye');

    hello.on('connect', function () {
        hello.send('杨老师');
        hello.on('message', function (msg) {
            console.log("杨老师:"+msg);
        })
    })
    goodbye.on('connect', function () {
        goodbye.emit('goodbye','杨老师');
        goodbye.on('goodbye', function (msg) {
            console.log("杨老师:"+msg);
        })
    })



</script>
<body>

</body>
</html>

服务端:

blob.png

客户端效果:

blob.png

2015年11月2日          ====== AYUI       www.ayjs.net      AY         杨洋原创编写,请不要转载谢谢========


推荐您阅读更多有关于“nodejs,”的文章

猜你喜欢

额 本文暂时没人评论 来添加一个吧

发表评论

必填

选填

选填

必填

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

  查看权限

合肥科大智能常年招聘C# .NET CORE,vue前端,JAVA开发,有想换工作的私聊我AY唯一QQ:875556003和AY交流

抖音号:wpfui 工作是wpf,不接活,目前主要折腾maui

AYUI8社区版Github地址:前往获取

杨洋(AaronYang简称AY,安徽六安人)目前是个人,还没公司AY唯一QQ:875556003和AY交流

高中学历,2010年开始web开发,2015年1月17日开始,兴趣学习研究WPF

声明:AYUI7个人与商用免费,源码可购买。部分DEMO不免费.AY主要靠卖技术服务挣钱

不是从我处购买的ayui7源码,我不提供任何技术服务,如果你举报从哪里买的,我可以帮你转正为我的客户,并送demo

查看捐赠

AYUI7.X MVC教程 更新如下:

第一课 第二课 程序加密教程

vs2015 企业版密钥HM6NR-QXX7C-DFW2Y-8B82K-WTYJV

vs2017 企业版密钥NJVYC-BMHX2-G77MM-4XJMR-6Q8QF

标签列表