NodeJS, Socket.io 및 ExpressJS를 사용한 실시간 채팅

NodeJS를 사용하면 내가 가장 좋아하는 언어 중 하나인 JavaScript로 백엔드 코드를 작성할 수 있습니다. 실시간 애플리케이션을 구축하기 위한 완벽한 기술입니다. 이 튜토리얼에서는 ExpressJS와 Socket.io를 사용하여 웹 채팅 애플리케이션을 구축하는 방법을 보여 드리겠습니다.

---

환경 설정

물론, 가장 먼저 해야 할 일은 시스템에 NodeJS를 설치하는 것입니다. Windows 또는 Mac 사용자인 경우 nodejs.org를 방문하여 설치 프로그램을 다운로드할 수 있습니다. Linux를 선호한다면 이 링크를 참조하는 것이 좋습니다. 이에 대해 자세히 설명하지는 않지만 설치 문제가 발생하면 기꺼이 도와드리겠습니다. 이 문서 아래에 의견을 남겨주세요.

NodeJS를 설치한 후 필요한 도구를 설정할 수 있습니다.

1. ExpressJS - 서버와 사용자에 대한 응답을 관리합니다
2. Jade - 템플릿 엔진
3. Socket.io - 프런트엔드와 백엔드 간의 실시간 통신을 허용합니다

다음 내용이 포함된 빈 디렉터리에 package.json 파일을 만듭니다.

으아악

콘솔(Windows - 명령 프롬프트)을 사용하여 폴더로 이동하여 다음을 실행합니다.

으아악

몇 초 안에 node_modules 디렉터리에 필요한 모든 종속 항목이 다운로드됩니다.

---

백엔드 개발

애플리케이션의 HTML 페이지를 제공하는 간단한 서버부터 시작한 다음 더 흥미로운 부분인 실시간 통신으로 넘어가겠습니다. 다음 핵심 expressjs 코드를 사용하여 index.js 파일을 만듭니다.

으아악

위에서 애플리케이션을 생성하고 해당 포트를 정의했습니다. 다음으로 경로를 등록합니다. 이 경우 매개변수가 없는 간단한 GET 요청입니다. 현재 경로 핸들러는 일부 텍스트를 클라이언트에 보냅니다. 마지막으로 물론 하단에서는 서버를 실행합니다. 애플리케이션을 초기화하려면 콘솔에서 다음을 실행하세요.

으아악

서버가 실행 중이므로 http://127.0.0.1:3700/을 열고 다음을 볼 수 있습니다.

으아악

이제 "작동합니다" 대신 HTML을 제공해야 합니다. 일반 HTML 대신 템플릿 엔진을 사용하는 것이 더 유리할 수 있습니다. Jade는 훌륭한 선택이며 ExpressJS와 훌륭하게 통합됩니다. 이것이 제가 내 프로젝트에서 주로 사용하는 것입니다. tpl이라는 디렉터리를 만들고 여기에 다음 page.jade 파일을 넣습니다.

으아악

Jade의 구문은 복잡하지 않지만 전체 가이드를 보려면 jade-lang.com을 참조하는 것이 좋습니다. ExpressJS와 함께 Jade를 사용하려면 다음을 설정해야 합니다.

으아악

이 코드는 Express에 템플릿 파일의 위치와 사용할 템플릿 엔진을 알려줍니다. 이는 모두 템플릿 코드를 처리할 함수를 지정합니다. 모든 것이 설정되면 response 对象的 .render 메소드를 사용하여 Jade 코드를 사용자에게 보낼 수 있습니다.

이 시점의 출력은 특별한 것이 아닙니다. 이는 채팅 메시지의 컨테이너 역할을 하는 div 元素（id 为 content 요소와 메시지를 보내는 데 사용할 두 개의 컨트롤(입력 필드 및 버튼)에 지나지 않습니다. p>

프론트엔드 로직을 유지하기 위해 외부 JavaScript 파일을 사용할 것이기 때문에 ExpressJS에 이러한 리소스를 찾을 위치를 알려주어야 합니다. 빈 디렉터리 만들기 public，并在调用 .listen 메서드 앞에 다음 줄을 추가합니다.

으아악

지금까지는 GET 요청에 성공적으로 응답하는 서버가 있습니다. 이제 Socket.io 통합을 추가할 차례입니다. 이 줄을 변경하세요:

으아악

받는 사람:

으아악

위에서는 ExpressJS 서버를 Socket.io에 전달했습니다. 실제로 실시간 통신은 여전히 ​​동일한 포트에서 이루어집니다.

다음으로 클라이언트로부터 메시지를 받아 다른 모든 클라이언트에게 보내는 코드를 작성해야 합니다. 모든 Socket.io 애플리케이션은 connection 핸들러로 시작됩니다. 하나쯤은 있어야 해:

으아악

사용자가 보낸 데이터를 다른 모든 소켓으로 전달하기 위해 핸들러 socket 实际上是客户端的套接字。将其视为服务器和用户浏览器之间的连接点。连接成功后，我们发送 welcome 类型的消息，当然，还会绑定另一个将用作接收器的处理程序。结果，客户端应该发出一条名为 send 的消息，我们将捕获该消息。接下来，我们只需使用 io.sockets.emit에 전달되는 개체입니다.

위 코드를 사용하면 백엔드가 클라이언트에 메시지를 보내고 보낼 준비가 되었습니다. 프런트엔드 코드를 추가해 보겠습니다.

---

프런트엔드 개발

디렉토리에 chat.js，并将其放置在应用程序的 public을 생성합니다. 다음 코드를 붙여넣으세요:

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data.message);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += messages[i] + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        var text = field.value;
        socket.emit('send', { message: text });
    };

}

我们的逻辑包装在 .onload 处理程序中，只是为了确保所有标记和外部 JavaScript 均已完全加载。在接下来的几行中，我们创建一个数组，它将存储所有消息、一个 socket 对象以及一些 DOM 元素的快捷方式。同样，与后端类似，我们绑定一个函数，它将对套接字的活动做出反应。在我们的例子中，这是一个名为 message 的事件。当此类事件发生时，我们期望收到一个对象，data，其属性为 message。将该消息添加到我们的存储中并更新 content div。我们还包含了发送消息的逻辑。这非常简单，只需发出一条名为 send 的消息。

如果你打开http://localhost:3700，你会遇到一些错误弹出窗口。这是因为我们需要更新 page.jade 以包含必要的 JavaScript 文件。

head
    title= "Real time web chat"
    script(src='/chat.js')
    script(src='/socket.io/socket.io.js')

请注意，Socket.io 管理 socket.io.js 的交付。您不必担心手动下载此文件。

我们可以在控制台中使用 node index.js 再次运行我们的服务器并打开http://localhost:3700。您应该会看到欢迎消息。当然，如果你发送一些东西，应该显示在内容的div中。如果您想确保它有效，请打开一个新选项卡（或者更好的是，一个新浏览器）并加载应用程序。 Socket.io 的伟大之处在于，即使您停止 NodeJS 服务器它也能工作。前端将继续工作。一旦服务器再次启动，您的聊天也会正常。

在目前的状态下，我们的聊天并不完美，需要一些改进。

---

改进

我们需要做的第一个更改是消息的标识。目前，尚不清楚哪些消息是由谁发送的。好处是我们不必更新 NodeJS 代码来实现这一点。这是因为服务器只是转发 data 对象。因此，我们需要在那里添加一个新属性，并稍后读取它。在对 chat.js 进行更正之前，让我们添加一个新的 input 字段，用户可以在其中添加他/她的姓名。在 page.jade 中，更改 controls div:

.controls
    | Name: 
    input#name(style='width:350px;')
    br
    input#field(style='width:350px;')
    input#send(type='button', value='send')

接下来，在code.js中：

window.onload = function() {

    var messages = [];
    var socket = io.connect('http://localhost:3700');
    var field = document.getElementById("field");
    var sendButton = document.getElementById("send");
    var content = document.getElementById("content");
    var name = document.getElementById("name");

    socket.on('message', function (data) {
        if(data.message) {
            messages.push(data);
            var html = '';
            for(var i=0; i<messages.length; i++) {
                html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
                html += messages[i].message + '<br />';
            }
            content.innerHTML = html;
        } else {
            console.log("There is a problem:", data);
        }
    });

    sendButton.onclick = function() {
        if(name.value == "") {
            alert("Please type your name!");
        } else {
            var text = field.value;
            socket.emit('send', { message: text, username: name.value });
        }
    };

}

为了总结这些变化，我们：

1. 为用户名的 input 字段添加了新快捷方式
2. 稍微更新了消息的呈现方式
3. 向对象添加了一个新的 username 属性，该属性将发送到服务器

如果消息数量过多，用户将需要滚动 div:

content.innerHTML = html;
content.scrollTop = content.scrollHeight;

请记住，上述解决方案可能不适用于 IE7 及更低版本，但没关系：IE7 是时候消失了。但是，如果您想确保支持，请随意使用 jQuery：

$("#content").scrollTop($("#content")[0].scrollHeight);

如果发送消息后输入字段被清除，那就太好了：

socket.emit('send', { message: text, username: name.value });
field.value = "";

最后一个无聊的问题是每次点击发送按钮。通过一点 jQuery，我们可以监听用户何时按下 Enter 键。

$(document).ready(function() {
    $("#field").keyup(function(e) {
        if(e.keyCode == 13) {
            sendMessage();
        }
    });
});

可以注册函数 sendMessage，如下所示：

sendButton.onclick = sendMessage = function() {
    ...
};

请注意，这不是最佳实践，因为它注册为全局函数。但是，对于我们在这里的小测试来说，一切都很好。

---

结论

NodeJS 是一项非常有用的技术，它为我们提供了巨大的力量和乐趣，特别是考虑到我们可以编写纯 JavaScript 的事实。正如您所看到的，仅用几行代码，我们就编写了一个功能齐全的实时聊天应用程序。非常整洁！

想要了解有关使用 ExpressJS 构建 Web 应用程序的更多信息？我们为您服务！

위 내용은 NodeJS, Socket.io 및 ExpressJS를 사용한 실시간 채팅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!