socketio express配置

水深无声 2021-07-25 01:49 327阅读 0赞

1、安装
    	cnpm install socket.io --save
    	
    2、服务器端配置
    	(1)在express创建好应用后
    		var server = require('http').Server(app);
    		
    	(2)得到io对象
    		var io = require('socket.io')(server);
    	
    	(3)通过io对象，监听客户端连接，执行回调
    		io.on('connection', function (socket) {
    				socket.on('监听客户端发送消息名称',function(data为接收的参数){...})
    				socket.emit('发送给客户端的消息名称',参数) 只有一个客户端能收到消息
    				io.emit('发送给客户端的消息名称',参数)   所有该名称的客户端都能收到消息
    	    })
    			
    	(4)将之前的app.listen监听换成server.listen监听
    		server.listen(4000,function(){
    	   	 console.log('this express server is running at http://127.0.0.1:4000 ');
    		});
    		
    3、客户端配置
    	(1)引入io对象
    		import io from 'socket.io-client'
    		
    	(2)连接服务器
    		const socket = io('ws://localhost:4000')
    		
    	(3)监听向服务器的发送和来自服务器的接收
    		socket.on('服务器的发送消息名称',function(data为接收参数){...})
    		socket.emit('发送给服务器的消息名称',参数)
    
    4、将客户端运行
    	将客户端文件引入项目要执行一次的文件即可，如主入口文件index.js等

代码示例:  
express:

socketio/test:

module.exports = function (server) { 
        // 得到 IO 对象
        const io = require('socket.io')(server)
    
        //监视连接(当有一个客户连接上时回调)
        io.on('connection', function (socket) { 
            console.log('soketio connected')
    
            // 绑定 sendMsg 监听, 接收客户端发送的消息
            socket.on('sendMsg', function (data) { 
    
                console.log('服务器接收到浏览器的消息', data)
                //向客户端发送消息(名称, 数据)
                socket.emit('receiveMsg', data.name + '_' + data.date+'哈哈')
                console.log('服务器向浏览器发送消息', data)
            })
        })
    }

客户端:

import io from 'socket.io-client'
    
    // 连接服务器, 得到代表连接的 socket 对象
    const socket = io('ws://localhost:4000')
    // 绑定'receiveMessage'的监听, 来接收服务器发送的消息
    socket.on('receiveMsg', function (data) { 
    console.log('浏览器端接收到消息:', data)
    })
    // 向服务器发送消息
    socket.emit('sendMsg', { name: 'Tom', date: Date.now()})
    console.log('浏览器端向服务器发送消息:', { name: 'Tom', date: Date.now()})

index.js主入口文件:

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './containers/App';
    import * as serviceWorker from './serviceWorker';
    import { HashRouter,Route,Switch,Redirect} from 'react-router-dom';
    
    import Register from './containers/register/register';
    import Main from './containers/main/main';
    import Login from './containers/login/login';
    
    import { Provider} from 'react-redux'
    import store from './redux/store'
    
    //引入socket.io客户端文件
    import './test/socketio'
    
    ReactDOM.render(
      <Provider store={ store}>
        <HashRouter>
          <Switch>
            <Route path='/register' component={ (props) => <Register {  ...props } />}></Route>  
            <Route path='/login' component={ (props) => <Login {  ...props } />}></Route>   
            <Route path='/' component={ (props) => <Main {  ...props } />}></Route>
            { /* <Redirect to='/register'></Redirect> */}
          </Switch> 
        </HashRouter>
      </Provider>
      ,
      document.getElementById('root')
    );
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();