Introduction to how to create a simple chat room with node.js-JS Tutorial-php.cn

Introduction to how to create a simple chat room with node.js

青灯夜游

Release： 2021-02-01 11:24:07

forward

2925 people have browsed it

UsingnodejsHow to create a simple chat room? The following article will introduce it to you. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Introduction to how to create a simple chat room with node.js

Related recommendations: "nodejs video tutorial"

I just started learning js. This article is based on node.js and websocket to implement a Simple online chat room system (chat group).

This article is suitable for beginners to read.

Without further ado, let’s get started.

In the B/S architecture, if we want to get a data, we need to request the server, and then the server responds. So if our client does not send a request, will the server take the initiative to send something to our client (browser)?

The answer is no. The client and server connect through the TCP/IP protocol, and then request a connection through the HTTP protocol. The HTTP protocol is a request-response protocol, and it is a stateless protocol, that is, there is no relationship between each request and response.

And what do we need for our chat room?

1. Send a message 2. Receive a message

In receiving a message: a client sends a message to the server, the server receives the message, and then takes the initiativeSend to another client.

So HTTP cannot meet our requirements. Here we will use socket protocol. When the server and client are connected, both are always ready to send and receive messages.

First download the socket.io module in npm (node.js must be installed before). Open cmd.

(I created a node.js chat folder and the files are placed in it)

Then start writing our server code and create files server.js.

//server.js

var http = require(&#39;http&#39;);
var fs = require(&#39;fs&#39;);
var ws = require(&#39;socket.io&#39;); //引入socket.io

var server = http.createServer(function (req, res) {
    var html = fs.readFileSync(&#39;./client.html&#39;); 
   //client.html是发送给客户端的文件(客户端界面)

    res.end(html);
}).listen(8000);

var io = ws(server); //http服务与ws服务相关联, 返回io服务实例

//监听用户的连接事件
io.on(&#39;connection&#39;,function (socket) {      
    //发生在用户连接io服务器时
    console.log(&#39;有新用户进入房间&#39;);

    //消息发送事件
    socket.on(&#39;message&#39;,function (obj) {
       console.log(obj);
       io.emit(&#39;message&#39;,obj); //发送消息给所有客户端（广播）
    });
});

Copy after login

Then start writing the client.

Because our server uses socket.io, the service corresponding to socket.io should be used in the client. Here I directly introduced a js file.

Create the file client.html.

//client.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js+webSocket聊天室</title>
</head>
<body>
<h1>liky聊天室</h1>
<textarea name="" id="text" ></textarea>
<button id="btn">发送</button>

<script src="http://wulv5.com/js/socket.io.min.js"></script>
<script>
    var socket = io.connect("/"); //连接聊天室的io服务器 io服务器的根地址

    var oText = document.getElementById("text");
    var oBtn = document.getElementById("btn");

    var myMessage = "";

    oBtn.onclick = function () {
        var mes = oText.value;

        //当消息为空时
        if(!mes){
            return;
        }
        myMessage = mes;
        socket.send(mes); //发送消息到服务器
        oText.value = ""; //清空文本框
    }

    //当服务器广播消息时，触发message事件，消息内容在回调函数中
    socket.on(&#39;message&#39;,function (mm) {
        var p = document.createElement(&#39;p&#39;);
        p.innerText = mm;
        if(myMessage === mm){
            p.style.cssText = "color:red;margin-left:10%";
        }
        document.body.appendChild(p);
    })

</script>
</body>
</html>

Copy after login

At this point, the code part is completed. Next open cmd and run our file.

You can now open the browser to see the effect. Open the browser and visit the address http://localhost:8000/. Open a few more pages to try the effect.

In this way, a simple local chat room is completed. You can transfer it to the server, and you can chat with others (I will write more about this when I have time).

For more programming-related knowledge, please visit: Programming Teaching! !

The above is the detailed content of Introduction to how to create a simple chat room with node.js. For more information, please follow other related articles on the PHP Chinese website!