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）结果展示

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