前端websocket实现简易聊天室

分为客户端和服务端,客户端就是一个简单的html页面,服务端使用node进行编写。具体代码如下

index.html

DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>websokettitle>
head>
<body>
    <h1>chat roomh1>
    <input type="text" id="msg" />
    <button id="send">发送button>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://127.0.0.1:3001/");

        function showMsg(str){
            var div = document.createElement('div');
            div.innerHTML = str;
            document.body.appendChild(div)
        }

        websocket.onopen=function(){
            console.log("open");
            // 用户发送文字
            document.getElementById('send').onclick = function() {
                var txt = document.getElementById('msg').value;
                if (txt) {
                    websocket.send(txt);
                }
            }
        }
        websocket.onclose = function() {
            console.log("close");
        }
        websocket.onmessage = function(e) {
            console.log(e.data);
            showMsg(e.data);
        }
    script>
body>
html>

server.js

var ws = require("nodejs-websocket"). // 引入webSocket模块

var port = 3001;

var clientCount = 0;  // 用来区分不同的用户

var server = ws.createServer(function (conn) {
    console.log("New connection")
    clientCount++  // 新建一个webScoket连接就加一,保证用户名唯一性
    conn.nickname = "user" + clientCount
    // 用户进入,广播给所有的用户
    broadcast("******* "+conn.nickname + " comes in *******");


    conn.on("text", function (str) {
        console.log("Received "+str)
        broadcast(conn.nickname + " say: " + str)
    })  // 用户发送文字,广播给所有的用户


    conn.on("close", function (code, reason) {
        broadcast("******* " + conn.nickname + " left *******");
    }) // 用户离开,广播给所有的用户
    
    conn.on("error", function(err) {
        console.log("error: "+err);
    })
})

// 端口监听
server.listen(port,'0.0.0.0',()=>{
  console.log('websocket服务启动-使用端口',port);
});

console.log("websocket server listening on " + port);

// 遍历所有的连接进行遍历发送文字
function broadcast (str) {
    server.connections.forEach(function (connection) {
        connection.sendText(str)
    })
}

使用方法

创建index.htmlserver.js文件,在server文件目录下npm init初始化package.json文件,并安装nodejs-websocket

npm install nodejs-websocket --save -D

启动server.js

node server.js

多开几个index.html页面就能体验到效果了
前端websocket实现简易聊天室_第1张图片
前端websocket实现简易聊天室_第2张图片

你可能感兴趣的:(javascript,前端,websocket,javascript,前端)