NodeJS+Express+Socket.io的简单及时通讯

效果图:
NodeJS+Express+Socket.io的简单及时通讯_第1张图片

1、初始化一个Node项目:

npm init // 一路回车即可 

2、安装依赖

npm i express
npm i socket.io

3、server.js创建服务,监听socket

var express = require('express');
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

var users = [];


app.use('/', express.static(__dirname+'/'));
server.listen(8088);

io.sockets.on('connection',(socket)=>{
    // 处理操作
}

4、客户端连接socket

// var socket = io.connect();
  var socket = io.connect('http://127.0.0.1:8088');

5、socket事件触发

// 发事件给单用户
socket.emit('receive_message',newData); 
// 发事件给所有用户
socket.broadcast.emit('receive_message',newData);

完整代码:
index.html


<html>
  <head>
    <meta charset="utf-8" />
    <title>Socket.IO Exampletitle>
  head>
  <body>
    <h1>Socket.IO及时通讯h1>
    <p id="count">p>
    <form id="message-form" action="#" style="display: flex; flex-direction: row; align-items: center;">
      <textarea id="message" rows="2" cols="30">textarea>
      <input type="submit" value="发送" style="background-color: blue; width: 50px; height: 30px; margin-left: 10px; color: white" />
    form>
    <div id="msg">

    div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js">script>
    <script src="/socket.io/socket.io.js">script>
    <script>
      // var socket = io.connect();
      var socket = io.connect('http://127.0.0.1:8088');
      socket.emit('login', { username: 'user'+ new Date().getTime()});

      socket.on('users',function(data){
        $('#count').text('当前在线人数:'+data.number);
      });

      var message = document.getElementById('message');
      $(message.form).submit(function() {
        socket.emit('message', { text: message.value });
        return false;
      });

      // 收到消息
      socket.on('receive_message', function (data) {
        $('#msg').append('

' + data.user + '说:' + data.text + '

'
); });
script> body> html>

server.js

var express = require('express');
var app = express();

var server = require('http').createServer(app);
var io = require('socket.io').listen(server);

var users = [];


app.use('/', express.static(__dirname+'/'));
server.listen(8088);

io.sockets.on('connection',(socket)=>{
  // 失去连接
  socket.on('disconnect',function(){
    if(users.indexOf(socket.username)>-1){
       users.splice(users.indexOf(socket.username),1);
       console.log(socket.username+'===>disconnected');
    }

      socket.broadcast.emit('users',{number:users.length});
  });

  socket.on('message',function(data){
    let newData = {text: data.text, user: socket.username}
    socket.emit('receive_message',newData);
    socket.broadcast.emit('receive_message',newData);
  });


  socket.on('login',function(data){
    if(users.indexOf(data.username)>-1){

    }else{
      socket.username = data.username;
      users.push(data.username);
      // 统计连接数
      socket.emit('users',{number:users.length});  // 发送给自己
      socket.broadcast.emit('users',{number:users.length}); // 发送给其他人
    }

  });

});


console.log('服务器运行于:localhost:8088');

项目地址:https://github.com/MisterZhouZhou/NodeDemo/tree/master/socketio

你可能感兴趣的:(Node基础,express,nodejs,server)