菜鸟学习nodejs--Socket.IO二（聊天服务器）

最新推荐文章于 2022-10-10 11:25:15 发布

孟海滨

最新推荐文章于 2022-10-10 11:25:15 发布

阅读量2.5k

点赞数

分类专栏： nodejs 文章标签：即时通信服务器 express

本文链接：https://blog.csdn.net/lovemenghaibin/article/details/51297228

版权

nodejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上一篇博客我们讲了利用Socket.IO实现服务器和客户端的即时通信，那么今天我们就来利用Socket.IO实现一下网络聊天的功能。当然这篇博客不会把每一个细节都列举出来，但是实现一个小功能还是可以的。

socket.io和Express的结合

在前边的博客，我讲了Express,他也是一个Nodejs的框架，而且幸运的是Express和Socket.IO还能完美的结合

var http = require('http');
var express = require('express'),
    app = module.exports.app = express();

var server = http.createServer(app);
var io = require('socket.io').listen(server);  //pass a http.Server instance
server.listen(3000);  //listen on port 3000

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {
  socket.emit('welcome', { text: 'OH HAI! U R CONNECTED!' });
});

当然我的socket的版本是1.4.5,如果版本是0.**的话，还需要好好的查一下。

基本功能

既然有了一个基础的连接到Socket.IO的Express服务器，那么就可以添加功能了

添加昵称

当用户需要聊天的时候，我们需要让用户有一个昵称，这样的话才能愉快的聊天，所以我们需要让用户自己填写昵称，然后提交到服务器，然后服务器接收到昵称以后保存起来。
表单信息

   <form id="set-nickname">
      <label for="nickname">Nickname:</label>
      <input type="text" id="nickname" />
      <input type="submit" />
    </form>

提交到服务器

 socket.emit('nickname', nickName.val());

服务器管理昵称

io.sockets.on('connection', function (socket) {
  socket.on('nickname', function (data) {
        nicknames.push(data);
        socket.nickname = data;
        console.log('Nicknames are ' + nicknames);
    }
    console.log('Nicknames are ' + nicknames);
  });
});

创建聊天服务器

在上一篇，我们已经讲过如何把消息广播给用户，那么接下来，我们利用上一篇博客的知识和本篇博客的只是，我们来创建一个实例。

创建服务器

服务器需要和Express框架整合，需要监听客户端，并管理昵称，和把消息广播给用户。

var http = require("http");
var express = require("express");
var app = module.exports.app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);

server.listen(3000);

//连接

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

io.sockets.on('connection', function (socket) {
  socket.on('nickname', function (data, fn) {
    if (nicknames.indexOf(data) != -1) { 
      fn(true);
    } else {
      fn(false);
      nicknames.push(data);
      socket.nickname = data;
      io.sockets.emit('nicknames', nicknames);
    }
  });
  socket.on('user message', function (data) {
    io.sockets.emit('user message', { 
      nick: socket.nickname, 
      message: data 
    });
  });
  socket.on('disconnect', function () {
    if (!socket.nickname) return;
    nicknames.splice(nicknames.indexOf(socket.nickname), 1);
  });
});

创建客户端

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Socket.io Express Example</title>
    <style type="text/css">
        form#send-message { display: none; }
        section#nicknames { width: 300px; float: right; }
        textarea#message { width: 300px; height: 100px; }
        section#messages p strong { margin-right: 5px; }
    </style>
  </head>
  <body>
    <h1>Socket.io Express Example</h1>
    <form id="set-nickname">
      <label for="nickname">Nickname:</label>
      <input type="text" name="nickname" id="nickname" />
      <input type="submit" />
    </form>
    <section id="nicknames"></section>
    <form id="send-message">
      <textarea id="message"></textarea>
      <input type="submit" value="Send message!" />
    </form>
    <section id="messages"></section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();
      socket.on('nicknames', function (data) {
        $('#nicknames').empty().append($('<ul>'));
        for(var i=0; i<data.length; i++) {
          $('#nicknames ul').append('<li>' + data[i] + '</li>');
        }
      });
      socket.on('user message', function (data) {
        $('#messages').append($('<p>').append($('<strong>').text(data.nick), data.message));
      });
      socket.on('announcement', function (data) {
        $('#messages').append($('<p>').append($('<em>').text(data.message)));
      });
      $(function () {
        $('#set-nickname').submit(function() {
          socket.emit('nickname', $('#nickname').val(), function (data) {
            if (!data) {
              $('#set-nickname').hide();
              $('#send-message').show();
            } else {
              $('#set-nickname')
              .prepend($('<p>')
              .text('Sorry - that nickname is already taken.'));
            }
          });
          return false;
        });
        $('#send-message').submit(function () {
          socket.emit('user message', $('#message').val());
          $('#message').val('').focus();
          return false;
        });
      });
    </script>
  </body>
</html>

创建package.json

{
    "name": "socket.io-express-example"
  , "version": "0.0.1"
  , "private": true
  , "dependencies": {
      "express": "4.13.1"
    , "socket.io": "1.4.5"
  }
}

加载执行

npm install
node app.js

孟海滨

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
菜鸟学习nodejs--Socket.IO二（聊天服务器）

上一篇博客我们讲了利用Socket.IO实现服务器和客户端的即时通信，那么今天我们就来利用Socket.IO实现一下网络聊天的功能。当然这篇博客不会把每一个细节都列举出来，但是实现一个小功能还是可以的。socket.io和Express的结合在前边的博客，我讲了Express,他也是一个Nodejs的框架，而且幸运的是Express和Socket.IO还能完美的结合var http = requir
复制链接

扫一扫

专栏目录