socketio express配置

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:

let express = require('express')
var bodyParser = require('body-parser');
var md5=require('blueimp-md5');
var cookieParser = require('cookie-parser');

var urlencodedParser = bodyParser.urlencoded({ extended: false });

const {UserModel} =require('./db/models');
const filter={password:0,__v:0};

var app=express();

//socket.io
var server = require('http').Server(app);
require('./socketio/test')(server);

server.listen(4000,function(){
    console.log('this express server is running at http://127.0.0.1:4000 ');
});

app.use(cookieParser());

// app.listen(4000,function(){
//     console.log('this express server is running at http://127.0.0.1:4000 ');
// })

app.get('/',function(req,res){
    res.send('aa');
})

//注册路由
app.post('/register',urlencodedParser,function(req,res){
    const {username,password,type}=req.body;
    console.log(username,password,type)
    UserModel.findOne({username},function(err,doc){
        if(doc)
        {
            //有用户,返回错误信息
            res.send({code:1,msg:'此用户已存在'})
        }else{
            //无用户,则保存
            new UserModel({username,password:md5(password),type}).save(function(err,doc){

            //生成cookie,用来持久化登录
            res.cookie('userid',doc._id,{maxAge:1000*60*60*24})
            const data={username,type,_id:doc._id}
            res.send({code:0,data})
          })
        }
    })
})

//登录路由
app.post('/login',urlencodedParser,function(req,res){
    const{username,password} =req.body

    UserModel.findOne({username,password:md5(password)},filter,function(err,user){
        if(user)
        {
            //生成cookie,用来持久化登录
            res.cookie('userid',user._id,{maxAge:1000*60*60*24});
            console.log('yes');
            res.send({code:0,data:{user}})

        }else{
            res.send({code:1,msg:'用户名或密码不正确'});
        }
    })

})
let userd=''
//更新用户信息路由(用户信息完善，选择头像薪资等)
app.post('/update',urlencodedParser,function(req,res){

    //将cookie中存放的_id拿出来
    const userid = req.cookies.userid
    userd=req.cookies.userid;
    console.log(userd)
    if(!userid) //cookie中无id
    {
        res.send({code:1,msg:'请先登录'});
    }else{
        const user=req.body;
        UserModel.findByIdAndUpdate({_id:userid},user,function(err,old){
            if(!old)
            {
                //无数据删除cookie
                // res.clearCookie('userid');

                res.send({code:1,msg:'请先登录'})
            }else{
                const {id,username,type}=old
                const data=Object.assign(user,{id,username,type})
                res.send({code:0,data})
            }
        })
    }

})

//根据cookie中的userid获取用户信息

app.get('/user',urlencodedParser,function(req,res){
       //将cookie中存放的_id拿出来
        const userid = req.cookies.userid
       if(!userid)
       {
           return res.send({code:1,msg:'请先登录'})
       }
       UserModel.findOne({_id:userid},filter,function(err,user){
           res.send({code:0,data:user})
       })
})

//获取用户列表(根据类型)
app.get('/userlist',function(req,res){
    const {type}=req.query;
    UserModel.find({type},filter,function(err,users){
        res.send({code:0,data:users})
    })
})

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();