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