Socketio下载以及使用方法

一、下载Socketio

Socketio官方网站

在这里插入图片描述

二、Socketio的连接

Socketio使用方法官方地址
1)服务器端
在这里插入图片描述

//服务器端代码
const io = require('socket.io')(app)    //socketio对象 ,这句话应放在监听代码之后,否则会报错

io.on('connection',socket =>{
    console.log('新用户连接了')
})

2)浏览器端
在这里插入图片描述

//只需要把包导进来
<script src="/socket.io/socket.io.js"></script>
    <script>
       //连接Socket服务,参数就是服务器地址,以3000端口为例
        var socket = io('http://localhost:3000')
    </script>

3)运行结果
在这里插入图片描述

三、Socketio的使用

主要包含两个方法
1)socket.emit()方法

socket.emit()方法表示触发某个事件
如果需要给浏览器发数据,需要触发浏览器注册的某个事件

//socket.emit()表示主动向浏览器发送数据
//参数1:事件的名字
socket.emit('send',{ name: 'zs' })

2)socket.on()方法

socket.on()表示注册某个事件
如果需要获取浏览器的数据,需要注册一个事件,等待浏览器触发

//接受发送过来的数据
socket.on('send',data =>{
	console.log(data)
})

四、浏览器给服务器发数据

浏览器给服务器发数据,本质就是浏览器触发服务器监听的事件

1)代码示例

//服务器当中注册一个事件
io.on('connection',socket =>{
    console.log('新用户连接了')
  	
	//参数1:事件名:任意
	//参数2:获取到的数据
    socket.on('haha',data =>{
        console.log(data)
    })
})
//以上代码为JS中的

//浏览器中触发这个事件,以下代码为HTML中的
//发送的数据不一定是字符串,像对象之类的都可以
 <script>
        //连接Socket服务,参数就是服务器地址
        var socket = io('http://localhost:3000')
		
		//触发!
        socket.emit('hehe', {name:'zs',age:18})
      
</script>

2)结果展示
在这里插入图片描述

五、服务器给浏览器发数据

服务器给浏览器发数据,本质就是服务器触发浏览器监听的数据

1)代码示例

io.on('connection',socket =>{
    console.log('新用户连接了')
    
    //socket.emit方法表示给浏览器发送数据
    //参数1:事件的名字
    // socket.emit('send',{ name: 'zs' })

    //参数1:时间名; 参数2:获取到的数据
    socket.on('hehe',data =>{
        console.log(data)
		
		//send事件,为浏览器注册的事件!!!
        socket.emit('send',data)
    })
})
以上代码为JS中代码

//注册时间表示用来获取服务器端发送过来的数据,以下代码为HTML中代码
socket.on('send', function(data){
            console.log(data)
 })

2)结果展示
在这里插入图片描述

要想发送数据就触发某个方法,要想拿数据就监听一个事件就行

  • 4
    点赞
  • 13
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术黑板 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

Sun990o

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值