2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!2018年的文章移至github上,点我去!
Fork me on GitHub

Socket.io+Nodejs通讯实例

具体源码: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。

posted on 2017-02-13 13:27  qize  阅读(33245)  评论(0)  编辑  收藏  举报

导航