node.js学习笔记(1)——express+socket.io模块构建简易聊天室

一、开发环境及参考书籍

IDE是vscode,已经配置好node环境等

参考书籍:《node.js入门经典》

二、安装模块

1.新建工程文件夹

2.新建package.json文件,代码如下

{
    "name": "socketio-express-example",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "express": "^4.16.3",
        "socket.io": "^2.1.1"
    }
}

注:(1)scripts中可以写入各种命令,具体情况可以在网上搜索,在这里,写入 "start":"node app.js" 后可以在vscode中选择npm start方式运行,其实等同于在命令行中执行node app.js

(2)dependencies中包含了项目中使用到的各种模块,node是一个开源项目,这些模块都是各位大佬以及编程爱好者贡献的。格式为"名称":"版本号",如果不清楚版本号是什么的话可以直接到github上找源码,例如socket.io的readme文档中包括了基本信息,链接https://github.com/socketio/socket.io

(3)express模块用于搭建服务器,socket.io模块用于前后端传递消息

3.运行npm install安装所需模块,安装后可以在工程文件夹下看到node_modules文件夹,里面存放了涉及的所有模块

三、搭建服务器

1.新建app.js文件,写入如下代码,可以创建一个本地服务器,端口号是3000

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

var http = require('http');
var server = http.createServer(app);
var path = require('path');
  
server.listen(3000);

//路由,访问"127.0.0.1:3000/"时调用
app.use('/', function(req, res){
    res.sendFile(path.join(__dirname, '/index.html'));
});

2.在工程目录下新建index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Socket.IO Express Example</title>
</head>
<body>
    <h1>Socket.IO Express Example</h1>
</body>
</html>

3.使用npm start命令运行任务,可以看到服务器已经搭建完成

四、socket.io模块

1. 使用socket.io模块可以实现服务器和浏览器之间的通信。在使用前必须将其添加到服务器端的node.js和客户端的jQuery中。

在node.js中引入io模块

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

在index.html中引入socket.io

<script src="/socket.io/socket.io.js"></script>
<script>        
    var socket = io.connect();
</script>

注:index.html中的文件路径/socket.io/socket.io.js是由socket.io库自动提供的,只要是在同一服务器上运行服务端和客户端

2. 主要用法

(1)服务端中连接与断开连接的监听,所有的其他socket.io操作都应在connetion的回调函数中进行

io.sockets.on('connection', function(socket){
    //连接后的代码
    socket.on('disconnect', function(){
        //断开连接后
    });
});

(2)使用sockets.on('data', function(){ })监听数据,使用socket.emit('data', value)发送数据

前端的数据发送和接收

socket.emit('data', dataValue);
socket.on('message', function(message){ });

服务端数据的发送和接收

socket.emit('message', messageValue);
socket.on('data', function(data){ });

注:dataValue的值可以为各种数据类型,比如对象形式,String形式等

五、业务逻辑

效果图如下:

未注册时界面需要输入昵称,注册后界面包括消息框、在线人员昵称显示,对话内容显示。

1. 前端HTML

<form id="set-nickname">
        <label for="nickname">Nickname:</label>
        <input type="text" id="nickname">
        <input type="submit">
</form>
<form id="send-message">
        <textarea id="message"></textarea>
        <input type="submit">
</form>
<section id="nicknames">
        <ul></ul>
</section>
<section id="messages">

</section>

主要设置了2个表单,一个输入昵称,一个输入消息

2. 前端Javascript

var socket = io.connect();
jQuery(function($){
    var nickname = $('#nickname');
    var setNicknameForm = $('#set-nickname');
    var nicknameList = $('#nicknames ul');
    var messageForm = $('#send-message');
    var message = $('#message');
    var messages = $('#messages');
    //注册昵称
    setNicknameForm.submit(function(event){
        event.preventDefault();
        socket.emit('nickname', nickname.val(), function(data){
            if(data){
                console.log('Nickname set successfully');
                setNicknameForm.hide();
                messageForm.show();
            }
            else{
                setNicknameForm.prepend('<p>Sorry, that nickname is already taken.</p>');
            }
        });
    });
    //提交输入的消息
    messageForm.submit(function(event){
        event.preventDefault();
        socket.emit('user message', message.val());
            message.val('').focus();
        });
        socket.on('nicknames', function(data){
            var html = '';
            for(var i=0; i<data.length; i++){
                html += '<li>' + data[i] + '</li>';
            }
        nicknameList.empty().append(html);
    });
    //在消息列表更新消息
    socket.on('user message', function(data){
        messages.append('<p><strong>'+data.nickname+'</strong>'+data.message+'</p>');
    });
});

主要是对两个表单内容进行处理,使用jQuery获取页面元素然后使用socket.emit传递数据到服务端。此外通过socket.on实时监听其他用户传来的消息并显示到页面上

3. 服务端代码

//使用数组存放用户姓名
var nicknames = [];

io.sockets.on('connection', function(socket){
    socket.on('nickname', function(data, callback){
        if(nicknames.indexOf(data) != -1){
            callback(false);
        }
        else{
            callback(true);
            nicknames.push(data);
            socket.nickname = data;
            console.log('Nicknames are: ' + nicknames);
            io.sockets.emit('nicknames', nicknames);
        }
    });
    socket.on('user message', function(data){
        io.sockets.emit('user message', {
            nickname: socket.nickname,
            message: data
        });
    });
    socket.on('disconnect', function(){
        if(!socket.nickname)
            return;
        if(nicknames.indexOf(socket.nickname) > -1){
            nicknames.splice(nicknames.indexOf(socket.nickname), 1);
        }
        console.log('Nicknames are: ' + nicknames);
        io.sockets.emit('nicknames', nicknames);
    });
});

和前端代码基本是对应的,断开连接后从昵称列表中删掉该昵称。服务端就像是一个中介,因为客户端和客户端不能直接交换信息,必须传递到服务端后由服务端再把消息分配给所有客户端。

六、问题所在

1. 新加入的用户看不到之前的消息。

这是因为其实所有的消息都是由提交过后添加到服务端的网页上的,比如A发了个消息,那么服务端接收到A的消息后直接广播给所有在线的客户端,客户端将这条消息添加到页面上,消息根本就没有保存,因此C登录后获取不了。

2. 刷新后直接掉线

因为刷新后会重新访问 / 路由,重新调用index.html文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值