使用Node.js搭建一个Websocket聊天室

Beaver1024 05-31 1626

前言：

此时大家对“html聊天室模板”都比较关注，朋友们都需要了解一些“html聊天室模板”的相关资讯。那么小编在网摘上网罗了一些有关“html聊天室模板””的相关资讯，希望同学们能喜欢，我们一起来学习一下吧！

使用Node.js和其Websocket模块快速创建一个聊天室应用。

创建Node.js工程

创建一个文件夹chartroom,在命令行中进入该文件夹，运行命令：

npm init

接受命令行的所有缺省设置。

接着运行命令

npm install ws --save

上面的命令会安装Websocket模块。

编写代码

在chartroom文件夹中创建index.js文件，代码内容如下：

var WebSocketServer = require("ws").Server;var wss = new WebSocketServer({port:3000}); wss.on("connection",function(ws){ ws.on("message",function(message){ if(message==="exit"){ ws.close(); } else { wss.clients.forEach(function(client){ client.send(message); }); } }); ws.send("Welcome to cyber chat");});

服务端代码

代码在本机3000端口侦听客户端的websocket连接，客户端连接后打出欢迎信息，接收到客户端的信息后广播该信息到所有客户端。如果客户端输入exit，则断掉和该客户端的连接。

在文件夹chatroom中创建index.html文件，代码如下：

<!DOCTYPE html><html><head> <meta name="viewport" content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no"/> <meta charset="utf-8"> <title>Websocket</title> <link rel="stylesheet" href="style.css"/></head><body><h1>Websocket</h1><div class="messages"></div><form action="javascript:void(0)"> <label for="message">></label> <input type="text" id="message" required autofocus /></form><script src="ws-client.js"></script></body></html>

客户端html文件

同样文件夹，html引用的css文件，style.css

body { background-color: black; color: #0F0; font-family: verdana;}body input,body label { display: block;}h1 { text-align: center;}input { outline: none; border: none; background-color: black; color: #0F0; padding: 1em .5em; display: block; font-size: 1.5em; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1;}label { display: block; padding: 1em .5em; font-size: 1.5em;}div.messages { margin-left: 1em;}form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;}

同样文件夹，html引用的js文件，ws-client.js

var ws = new WebSocket("ws://localhost:3000");ws.onopen = function() { setTitle("Connected to Cyber Chat");};ws.onclose = function() { setTitle("DISCONNECTED");};ws.onmessage = function(payload) { printMessage(payload.data);};document.forms[0].onsubmit = function () { var input = document.getElementById('message'); ws.send(input.value); input.value = '';};function setTitle(title) { document.querySelector('h1').innerHTML = title;}function printMessage(message) { var p = document.createElement('p'); p.innerText = message; document.querySelector('div.messages').appendChild(p);}

ws客户端js文件

连接本机3000端口的websocket服务器，收到消息就在页面上打印出来，提交表单就发送信息到服务器。

至此，代码就全部完成，简易聊天室搭建完毕。

测试聊天室

进入命令行，转到chatroom目录中，运行命令：