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

青旅半醒 2022-06-07 10:53 120阅读 0赞

**目录**

*  [需要的条件][Link 1]
 *  [演示的功能][Link 2]
 *  [服务端][Link 3]
 *  [客户端][Link 4]

> 具体源码:[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_API]

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

## 演示的功能 ##

--------------------

*  客户端发送消息给服务端
 *  后端触发事件告知客户端
 *  客户端离开触发服务端事件

## 服务端 ##

--------------------

server.js

*  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>

![743207-20170206152759369-572618002.png][]

*  发送消息按钮用来给服务端发送信息，触发服务端定义的hi事件。
 *  离开页面按钮用来离开页面，也就是socket会自动断开。触发服务端定义的disconnect。

原文:[http://www.cnblogs.com/zqzjs/p/6370072.html][http_www.cnblogs.com_zqzjs_p_6370072.html]

[Link 1]: http://www.cnblogs.com/zqzjs/p/6370072.html#需要的条件
[Link 2]: http://www.cnblogs.com/zqzjs/p/6370072.html#演示的功能
[Link 3]: http://www.cnblogs.com/zqzjs/p/6370072.html#服务端
[Link 4]: http://www.cnblogs.com/zqzjs/p/6370072.html#客户端
[Socket]: https://github.com/zhaoqize/study-work/tree/master/CNBLOG/Socket
[socket.io-client]: https://github.com/socketio/socket.io-client
[socket.io]: https://github.com/socketio/socket.io/
[socket.io_API]: https://github.com/socketio/socket.io/blob/master/docs/API.md
[socket.io-client_API]: https://github.com/socketio/socket.io-client/blob/master/docs/API.md
[743207-20170206152759369-572618002.png]: /images/20220607/2b15524995f849d49b8d87358f9c5ee5.png
[http_www.cnblogs.com_zqzjs_p_6370072.html]: http://www.cnblogs.com/zqzjs/p/6370072.html