Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用
socket.io的特点
易用性:socket.io封装了服务端和客户端,使用起来非常简单方便。
跨平台:socket.io支持跨平台,这就意味着你有了更多的选择,可以在自己喜欢的平台下开发实时应用。
自适应:它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用,非常方便和人性化,而且支持的浏览器最低达IE5.5。
安装
使用npm安装socket.io
npm install socket.io
启动一个简单的服务
新建目录,新建app.js, index.html
app.js 服务端
var express = require('express');
var path = require('path');
var app = express();
app.get('/', function (req, res) {
res.sendFile(path.resolve('index.html'));
});
var server = require('http').createServer(app);
var io = require('socket.io')(server);
io.on('connection', function (socket) {
console.log('客户端已经连接');
socket.on('message', function (msg) {
console.log(msg);
socket.send('sever:' + msg);
});
});
server.listen(80);
index.html 客户端
服务端运行后会在根目录动态生成socket.io的客户端js文件 客户端可以通过固定路径/socket.io/socket.io.js添加引用 客户端加载socket.io文件后会得到一个全局的对象io connect函数可以接受一个url参数,url可以socket服务的http完整地址,也可以是相对路径,如果省略则表示默认连接当前路径 创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>socket.io</title>
</head>
<body>
<h2>socket.io</h2>
<script src="/socket.io/socket.io.js"></script> // 引用脚本,固定写法
window.onload = function(){
var socket = io.connect('/');
//监听与服务器端的连接成功事件
socket.on('connect',function(){
console.log('连接成功');
});
//监听与服务器端断开连接事件
socket.on('disconnect',function(){
console.log('断开连接');
});
};
</body>
</html>
发送消息
成功建立连接后,我们可以通过socket对象的send函数来互相发送消息
修改index.html 如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>socket.io</title>
</head>
<body>
<h2>socket.io</h2>
<script src="/socket.io/socket.io.js"></script> // 引用脚本,固定写法
window.onload = function(){
var socket = io.connect('/');
//监听与服务器端的连接成功事件
socket.on('connect',function(){
console.log('连接成功');
//客户端连接成功后发送消息'welcome'
socket.send('welcome');
});
//客户端收到服务器发过来的消息后触发
socket.on('message',function(message){
console.log(message);
});
//监听与服务器端断开连接事件
socket.on('disconnect',function(){
console.log('断开连接');
});
};
</body>
</html>
app.js 修改如下
let express = require('express')
let http = require('http')
let app = express()
app.use(express.static(__dirname))
app.get('/', function (res, req) {
res.header('Content-Type', 'text/html;charset=utf8')
res.sendFile(path.resolve('index.html'))
})
let server = http.createServer(app)
// 因为websocket协议是要依赖http协议实现握手的,所以需要把httpServer的实例传递给socket.io
let socketIo = require('socket.io')
let io = socketIo(server)
// 在服务器监听客户端的链接
io.on('connection', socket => {
console.log('客户端连接到服务器')
// 监听接受客户端发过来的消息
socket.on('message', msg => {
console.log('客户端等候扫服务器的消息', msg)
// 像客户端发送数据
socket.send(`服务器说:${msg}`)
})
socket.on('disconect', function () {
console.log('断开连接')
})
socket.on('error', () => {
console.log('连接错误')
})
})
server.listen(9999)
分析
send函数只是emit的封装
function send(){
var args = toArray(arguments);
args.unshift('message');
this.emit.apply(this, args);
return this;
emit函数有两个参数
第一个参数是自定义的事件名称,发送方发送什么类型的事件名称,接收方就可以通过对应的事件名称来监听接收
第二个参数是要发送的数据
服务端事件
事件名称 含义
connection 客户端成功连接到服务器
message 接收到客户端发送的消息
disconnect 客户端断开连接
error 监听错误
客户端事件
事件名称 含义
connect 成功连接到服务器
message 接收到服务器发送的消息
disconnect 客户端断开连接
error 监听错误
划分命名空间
可以把服务划分成多个命名空间,默认/不同空间不能通信
可以把服务分成多个命名空间,默认/,不同空间内不能通信
io.on('connection', socket => {});
io.of('/news').on('connection', socket => {});
客户端链接命名空间
let socket = io('http://localhost/');
let socket = io('http://localhost/news');
房间
可以把一个命名空间分成多个房间,一个客户端可以同时进入多个房间。
如果大大厅里广播 ,那么所有在大厅里的客户端和任何房间内的客户端都能收到消息。
所有在房间里的广播和通信都不会影响到房间以外的客户端
进入房间
socket.join('chat');//进入chat房间
离开房间
socket.leave('chat');//离开chat房间
全局广播
广播就是把消息发送给多个客户端
向大厅和房间广播
io.emit('message','全局广播');
像除了自己之外的其它客户端广播
socket.broadcast.emit('message', msg);
房间内广播
向房间内广播, 从服务器的角度来提交事件,提交者会包含在内
向myRoom广播一个事件,在此房间内除了自己外的所有客户端都会收到消息
io.in('myRoom').emit('message', msg);
io.of('/news').in('myRoom').emit('message',msg);
向房间内广播, 从客户端的角度来提交事件,提交者会排除在外
//向myRoom广播一个事件,在此房间内除了自己外的所有客户端都会收到消息
socket.broadcast.to('myroom').emit('message', msg);
---------------------
作者:Corner1990
来源:CSDN
原文:https://blog.csdn.net/weixin_33768153/article/details/84314607
版权声明:本文为博主原创文章,转载请附上博文链接!
网友评论