您的位置：首页 > Web前端 > Node.js

Socket.io+Nodejs通讯实例---流程梳理

2017-10-19 09:17 495 查看

目录
需要的条件
演示的功能
服务端
客户端

具体源码:Socket

目录结构

D:.

│ package.json

│ server.js

│

└─public

index.html

socket.io.js

需要的条件

socket.io.js 供前端界面初始化io
socket.io 供NodeJs端提供socket方法

socket.io.js存在于socket.io-client

socket.io存在于socket.io

socket.io服务端API文档

socket.io-client客户端的API文档

演示的功能

客户端发送消息给服务端

后端触发事件告知客户端

客户端离开触发服务端事件

服务端

server.js

var express = require('express');
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io')(server);

app.use('/', express.static(__dirname + '/public'));

server.listen(80);

//socket部分
io.on('connection', function(socket) {
//接收并处理客户端的hi事件
socket.on('hi', function(data) {
console.log(data);

//触发客户端事件c_hi
socket.emit('c_hi','hello too!')
})

//断开事件
socket.on('disconnect', function(data) {
console.log('断开',data)
socket.emit('c_leave','离开');
//socket.broadcast用于向整个网络广播(除自己之外)
//socket.broadcast.emit('c_leave','某某人离开了')
})

});

connection用来处理socket链接事件
disconnect处理连接断开事件
后端接受前端事件通过

socket.on(EventName,function(date){})

后端触发前端事件通过

socket.emit(EventName,msg)

这个后端演示了,前端发送消息给后端，触发hi事件，hi事件通过回调在触发客户端定义的c_hi事件告知前端。

客户端

index.html

<!DOCTYPE html>
<html>

<head>
<title>socket</title>
</head>

<body>

<button id="sendBtn">发送消息</button>

<button id="leaveBtn">离开</button>

</body>
<script type="text/javascript" src="./socket.io.js"></script>
<script type="text/javascript">
var socket=io.connect('localhost:80'),//与服务器进行连接
send=document.getElementById('sendBtn'),
leave=document.getElementById('leaveBtn');

send.onclick=function(){
socket.emit('hi', 'hello!');
}

leave.onclick=function(){
window.location.href="about:blank";
window.close()
socket.emit('leave', 'leave');
}

//接收来自服务端的信息事件c_hi
socket.on('c_hi',function(msg){
alert(msg)
})

// socket.on('c_leave',function(msg){
//     alert(msg)
// })

</script>

</html>

发送消息按钮用来给服务端发送信息，触发服务端定义的hi事件。
离开页面按钮用来离开页面，也就是socket会自动断开。触发服务端定义的disconnect。
原文:http://www.cnblogs.com/zqzjs/p/6370072.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航