Socket.io 知识点总结

最新推荐文章于 2023-03-08 13:18:26 发布

zgq_sir

最新推荐文章于 2023-03-08 13:18:26 发布

阅读量1k

点赞数

文章标签：前端 node.js html5 vue.js npm

本文链接：https://blog.csdn.net/zgq_sir/article/details/105235105

版权

Socket.io
服务端运行后会在根目录动态生成socket.io的客户端js文件客户端可以通过固定路径/socket.io/socket.io.js添加引用

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

知识点
emit
emit函数有两个参数

第一个参数是自定义的事件名称,发送方发送什么类型的事件名称,接收方就可以通过对应的事件名称来监听接收

第二个参数是要发送的数据

io.emit('user connect',user+'进入聊天室');

server端
new Server

因为 WebSocket 协议是建立在 HTTP 协议之上的，所以在创建 WebSocket 服务时需要调用 http 模块并调用其下的 createServer 方法，将生成的 server 作为参数传入 socket.io 的方法中。

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

server.listen(8000);

io.onconnection(socket)

io 的 connection 事件表示客户端与服务器成功建立连接，它会接收一个回调函数，该回调函数会接收一个 socket 参数。

io.on('connection', (socket) => {
    console.log(socket);
});

io.emit(EventName, param1, param2…)

io.emit 方法用于向服务器发送消息，其第一个参数表示自定义的数据名，后面表示需要配合事件传入的参数。

io.on('connection', (socket) => {
    io.emit('server message', {msg: 'Hello World.'})
});

socket.on(EventName, callback)

socket.on 方法用于接收客户端发送来的消息，EventName 参数为客户端自定义的事件名，callback 为回调函数，回调函数接收的参数即客户端传递来的参数。

io.on('connection', (socket) => {
   socket.on('client message', (data) => {
       console.log(data);
   });
});

socket.broadcast.emit()

socket.broadcast.emit() 方法表示向除了自己以外的客户端发送消息。举个例子，当我们输入 “Message” 点击发送，只需要将 “Message” 通过服务器发送给其他客户端用于显示，而本地只需要将 “Message” 通过 js 代码添加进聊天窗口即可，而不需要经过服务器。

io.on('connection', (socket) => {
    socket.broadcast.emit('server message', {
        msg: 'Hello World.'
    });
});
socket.ondisconnect

socket 的 disconnect 事件表示客户端与服务端断开连接。

io.on('connection', (socket) => {
    socket.on('disconnect', () => {
        console.log('连接已断开...')；
    });
});

客户端
首先需要引入 socket.io 模块中的 socket.io.js 文件。

<!Doctype HTML>
<html>
<head>
    <title>Socket.IO chat</title>
    <script src="/socket.io/socket.io.js"></script>
</head>
</html>

io()
引入成功后，就可能通过 io() 生成客户端所用的 socket 对象。

var socket = io();
socket.emit(EventName, param1, param2, …..)

socket.emit 方法用于客户端向服务端发送消息，服务端与之对应的是 socket.on 方法来接收消息。

//客户端
var socket = io();
socket.emit('client message', {
    msg: 'Hello Server'
});

//服务端
io.on('connection', (socket) => {
    socket.on('client message', (data) => {
        console.log(data.msg); // Hello Server
    });
});

socket.on(EventName)

socket.on 方法用于接收服务端发来的消息

//服务端
io.on('connection', (socket) => {
    io.emit('server message', {
        msg: 'Hello Client'
    });
});
//客户端
var socket = io();
socket.on('server message', (data) => {
    console.log(data.msg); // Hello Client
});

教程

服务器端
io.on(‘connection’,function(socket));//监听客户端连接,回调函数会传递本次连接的socket

io.sockets.emit(‘String’,data);//给所有客户端广播消息

io.sockets.socket(socketid).emit(‘String’, data);//给指定的客户端发送消息

socket.on(‘String’,function(data));//监听客户端发送的信息

socket.emit(‘String’, data);//给该socket的客户端发送消息

广播消息

//给除了自己以外的客户端广播消息
socket.broadcast.emit("msg",{data:"hello,everyone"});
//给所有客户端广播消息
io.sockets.emit("msg",{data:"hello,all"});

分组

socket.on('group1', function (data) {
        socket.join('group1');
});
socket.on('group2',function(data){
        socket.join('group2');
 });

客户端发送

```bash
socket.emit(‘group1’)，就可以加入group1分组；
socket.emit(‘group2’)，就可以加入group2分组；

一个客户端可以存在多个分组（订阅模式）

```bash
socket.join('chat');//进入chat房间
socket.leave('chat');//离开chat房间

踢出分组

socket.leave(data.room);

对分组中的用户发送信息

//不包括自己
socket.broadcast.to('group1').emit('event_name', data);
//包括自己
io.sockets.in('group1').emit('event_name', data);
broadcast方法允许当前socket client不在该分组内

获取连接的客户端socket

io.sockets.clients().forEach(function (socket) {
    //.....
})

获取分组信息

//获取所有房间（分组）信息
io.sockets.manager.rooms
//来获取此socketid进入的房间信息
io.sockets.manager.roomClients[socket.id]
//获取particular room中的客户端，返回所有在此房间的socket实例
io.sockets.clients('particular room')

另一种分组方式

io.of('/some').on('connection', function (socket) {
    socket.on('test', function (data) {
        socket.broadcast.emit('event_name',{});
    });
});

客户端

var socket = io.connect('ws://103.31.201.154:5555/some')
socket.on('even_name',function(data){
   console.log(data);
})

客户端都链接到ws://103.31.201.154:5555 但是服务端可以通过io.of(‘/some’)将其过滤出来。

另外，Socket.IO提供了4个配置的API：
io.configure, io.set, io.enable, io.disable。

其中io.set对单项进行设置，

io.enable和io.disable用于单项设置布尔型的配置。

io.configure可以让你对不同的生产环境（如devlopment，test等等）配置不同的参数。

客户端

建立一个socket连接

var socket = io(“ws://103.31.201.154:5555”);

监听服务消息

socket.on('msg',function(data){
    socket.emit('msg', {rp:"fine,thank you"}); //向服务器发送消息
    console.log(data);
});
socket.on(“String”,function(data))

监听服务端发送的消息 Sting参数与服务端emit第一个参数相同

监听socket断开与重连。

socket.on('disconnect', function() {
    console.log("与服务其断开");
});

socket.on('reconnect', function() {
    console.log("重新连接到服务器");
});

zgq_sir

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫