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

最新推荐文章于 2024-03-19 17:50:36 发布

转载最新推荐文章于 2024-03-19 17:50:36 发布 · 644 阅读

文章标签：

#Socket.io #Nodejs通讯实例 #Socket.IO聊天室 #Socket.IO的进阶使用技巧 #Socket.IO方法介绍

socket 同时被 2 个专栏收录

16 篇文章

订阅专栏

node.js

7 篇文章

订阅专栏

本文介绍了一个使用 Socket.IO 实现的简单示例，包括服务端与客户端的搭建过程。该示例展示了客户端如何发送消息给服务端，服务端如何响应客户端，并在客户端离开时通知服务端。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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