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

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

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

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

打开nodejs命令行

安装npm install socket.io

blob.png

报了个python错误,自己去官网下载个

blob.png

https://www.python.org/downloads/release/python-2710/      我下载的是2.7.*的


然后我们重新装下


2. socket.io可用于实现以下几种方式

HTML5的WebSocket

可在Flash中使用的WebSocket

XHR轮询

JSONP轮询

Forever Iframe



3.demo准备

新建socketdemo.js

然后把这个node_modules文件夹拷贝到nodejs/udpdemo文件夹里下面

blob.png

blob.png

引入库运行结果无措就行



4.demo开始

新建socketdemo.html用于socket通讯测试

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket=io.connect();
    socket.on('message', function (data) {
        console.log(data);
        socket.send('客户端收到了消息!')
    })
    socket.on('disconnect', function () {
        console.log('服务器断开连接');
    })
</script>
<body>

</body>
</html>

这里socket.io/socket.io.js服务器提供的,客户端不需要放,客户端message接收消息触发

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

服务端,socket.io借助http服务器

我们使用fs去返回 一个html页面给客户端,然后socket.io去listen那http服务器

使用socket.send方法向客户端推送消息,客户端也同样如此,message事件都是彼此接收消息时候触发

/**
 * Created by aaronyang on 2015/11/2.
 */
var http=require('http');
var sk=require('socket.io');
var fs=require('fs');
var server=http.createServer(function (req,res) {
    res.writeHead(200,{'Content-Type':'text/html'})
    res.end(fs.readFileSync('./socketdemo.html'))
}).listen(1337);

var socket=sk.listen(server);
socket.on('connection', function (socket) {
    console.log('客户端建立了连接');
    socket.send('你好');
    socket.on('message', function (msg) {
        console.log('收到客户端的消息:' + msg);
    })
    socket.on('disconnect', function () {
        console.log('客户端断开连接');
    })
  })

服务端的消息

blob.png

客户端:   由于服务器发送你好,所以客户端收到你好,然后客户端发送‘客户端收到了消息’,服务端也收到了。

blob.png


我们关闭浏览器tab,服务器显示断开

blob.png

我们重新那个tab

blob.png

此时关闭服务器

blob.png


在使用socket.io类库时候,除了可以互相发送消息,也可以使用socket的emit方法互相调用事件

socket.emit(event,data,[callback])

回调函数 function(data1,data2....)可以放置任意个数

socket除了on方法也有once方法,毁掉函数function(data,fn)第一个参数为对方发送的事件中携带的数据,第二个参数值为 对方在发送事件时指定的callback回调函数。


demo互相发送事件

新建socketdemo2.js

/**
 * Created by aaronyang on 2015/11/2.
 */

/**
 * Created by aaronyang on 2015/11/2.
 */
var http=require('http');
var sk=require('socket.io');
var fs=require('fs');
var server=http.createServer(function (req,res) {
    res.writeHead(200,{'Content-Type':'text/html'})
    res.end(fs.readFileSync('./socketdemo2.html'))
}).listen(1337);

var socket=sk.listen(server);
socket.on('connection', function (socket) {
    console.log('客户端建立了连接');
    socket.emit('msg',{name:'ay'});
    socket.on('ayevent', function (data) {
        console.log('客户端触发了ayevent:%j',data);
    })

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

新建socketdemo2.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script src="/socket.io/socket.io.js"></script>
<script>
    var socket=io.connect();
    socket.on('msg', function (data) {
        console.log('客户端收到了消息:'+data.name)
        socket.emit('ayevent',{ay:'helloay'});
    })
    socket.on('disconnect', function () {
        console.log('服务器断开连接');
    })
</script>
<body>

</body>
</html>

服务端效果:

blob.png

客户端效果:

blob.png

总结:  emit互相调用事件,on或者once 定义自定义事件,或者已经有的事件



emit时候发送回调函数,修改demo2

/**
 * Created by aaronyang on 2015/11/2.
 */

/**
 * Created by aaronyang on 2015/11/2.
 */
var http=require('http');
var sk=require('socket.io');
var fs=require('fs');
var server=http.createServer(function (req,res) {
    res.writeHead(200,{'Content-Type':'text/html'})
    res.end(fs.readFileSync('./socketdemo2.html'))
}).listen(1337);

var socket=sk.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('客户端断开连接');
    })
})


html修改如下:

socket.on('msg', function (data,fn) {
    console.log('客户端收到了消息:'+data.name)
    socket.emit('ayevent',{ay:'helloay'});
    fn(1,2,3);
})

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

标签列表