Nodejs新手学习：基本是参照Nodejs入门经典写的一个socket.io聊天室

Nodejs新手学习：基本是参照Nodejs入门经典写的一个socket.io聊天室

很简单的一个小程序,用到socket.io
git: https://github.com/fwjyttbtx/ChatApp
希望能指出问题

8 回复

Nodejs新手学习：基本是参照Nodejs入门经典写的一个socket.io聊天室

简介

本教程将带你通过一个简单的Node.js应用——基于socket.io的聊天室。这个项目非常基础，适合初学者理解Node.js和WebSocket的工作原理。

技术栈

  • Node.js: 用于后端开发。
  • socket.io: 用于实时通信。
  • Express: 用于创建Web服务器。

步骤

  1. 初始化项目 创建一个新的文件夹并初始化npm项目：

    mkdir chatapp
cd chatapp
npm init -y

  2. 安装依赖 安装所需的npm包：

    npm install express socket.io

  3. 编写服务器端代码 创建一个server.js文件，并添加以下代码：

    const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

// 创建Express应用
const app = express();
// 创建HTTP服务器
const server = http.createServer(app);
// 启动socket.io
const io = socketIo(server);

// 静态文件服务
app.use(express.static('public'));

// 监听连接事件
io.on('connection', (socket) => {
    console.log('A user connected:', socket.id);

    // 监听消息事件
    socket.on('chat message', (msg) => {
        console.log('message: ' + msg);
        // 广播消息给所有客户端
        io.emit('chat message', msg);
    });

    // 处理断开连接
    socket.on('disconnect', () => {
        console.log('User disconnected:', socket.id);
    });
});

// 监听端口
server.listen(3000, () => {
    console.log('listening on *:3000');
});

  4. 编写客户端代码 在项目中创建一个public文件夹，并在其中创建一个index.html文件，添加以下HTML和JavaScript代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Socket.io Chat</title>
    <style>
        #messages { list-style-type: none; margin: 0; padding: 0; }
        #messages li { padding: 8px; margin-bottom: 10px; background: #f5f5f5; }
    </style>
</head>
<body>
    <ul id="messages"></ul>
    <form action="">
        <input id="m" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        var socket = io();
        var form = document.getElementsByTagName('form')[0];
        var input = document.getElementById('m');
        var ul = document.getElementById('messages');

        form.addEventListener('submit', function(e) {
            e.preventDefault();
            if (input.value) {
                socket.emit('chat message', input.value);
                input.value = '';
            }
        });

        socket.on('chat message', function(msg) {
            var item = document.createElement('li');
            item.textContent = msg;
            ul.appendChild(item);
            window.scrollTo(0, document.body.scrollHeight);
        });
    </script>
</body>
</html>

  5. 运行项目 在命令行中运行服务器：

    node server.js

    打开浏览器访问http://localhost:3000，你就可以看到一个简单的聊天室了。

总结

以上是一个非常基础的socket.io聊天室实现。你可以在此基础上扩展功能，例如用户登录、房间管理等。希望这个示例对你有所帮助！


app.get(’/’, function(req, res){ res.render(‘index’,{title:‘xx’});});

对的 title删除了 然后我没添加了 多谢指正~

没办法连接啊，我输入用户名点击GO的出现如下错误： info - handshake authorized 5YfjQ5sr1djNSYkJU5Mv

/Users/pro/Desktop/ChatApp-master/node_modules/socket.io/lib/transports/websocket.js:33 else transport = new protocolVersions[‘default’](mng, data, req); ^ TypeError: undefined is not a function at new WebSocket (/Users/pro/Desktop/ChatApp-master/node_modules/socket.io/lib/transports/websocket.js:33:20) at Manager.handleClient (/Users/pro/Desktop/ChatApp-master/node_modules/socket.io/lib/manager.js:662:19) at Manager.handleUpgrade (/Users/pro/Desktop/ChatApp-master/node_modules/socket.io/lib/manager.js:618:8) at Server.<anonymous> (/Users/pro/Desktop/ChatApp-master/node_modules/socket.io/lib/manager.js:123:10) at Server.EventEmitter.emit (events.js:106:17) at Socket.socket.ondata (http.js:1986:14) at TCP.onread (net.js:525:27)

请楼主帮忙查看啊？

请问你的系统是？这个是跑在win7下的 我在公司写的，回家后clone下来npm install之后没有问题呀。看意思是找不到protocolVersions的定义的样子，能把你的环境告诉我么，我看能复现不

ChatApp\app.js:63 if(err) throw err; ^ Error: ENOENT, open ‘e ChatApp\messageData\message Mon Mar 24 2014.txt’

添加个messageData这个文件夹就行了 我没有写这个文件夹创建的代码。上传时候是被gitignore掉的

根据你的描述，这个帖子似乎是在寻求帮助以完善一个基于Socket.IO的简单聊天室程序。由于你没有提供具体的问题或错误信息，我将提供一些关于如何构建这样一个聊天室的基本指导，并附上一些示例代码。

示例代码

服务器端（使用Express + Socket.IO）

首先确保安装了必要的依赖：

npm install express socket.io

然后创建server.js文件：

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

app.get('/', (req, res) => {
  res.send('<h1>Welcome to the Chat Room</h1>');
});

io.on('connection', (socket) => {
  console.log('A user connected:', socket.id);

  socket.on('chat message', (msg) => {
    console.log('Message:', msg);
    io.emit('chat message', msg); // 广播给所有客户端
  });

  socket.on('disconnect', () => {
    console.log('User disconnected:', socket.id);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

客户端（HTML + JavaScript）

创建一个简单的HTML页面来连接到服务器：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat Room</title>
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();
  document.addEventListener('DOMContentLoaded', () => {
    const form = document.querySelector('form');
    const input = document.querySelector('#input');
    const messagesContainer = document.querySelector('#messages');

    form.addEventListener('submit', (e) => {
      e.preventDefault();
      if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
      }
    });

    socket.on('chat message', (msg) => {
      const item = document.createElement('li');
      item.textContent = msg;
      messagesContainer.appendChild(item);
    });
  });
</script>
</head>
<body>
<form>
  <input id="input" autocomplete="off" /><button>Send</button>
</form>
<ul id="messages"></ul>
</body>
</html>

解释

  • 服务器端：我们使用Express设置了一个简单的HTTP服务器，并使用Socket.IO处理WebSocket通信。当一个新的用户连接时，我们监听他们发送的消息并将其广播给所有其他在线用户。
  • 客户端：这是一个基本的HTML页面，它通过Socket.IO与服务器建立连接。当表单提交时，它会发送一条消息到服务器，同时接收来自服务器的消息并在页面上显示它们。

如果你遇到了特定的问题或者错误，请提供更多详细信息，这样我可以更准确地帮助你解决问题。

回到顶部