码迷,mamicode.com
首页 > Web开发 > 详细

基于WebSocket实现聊天室(Node)

时间:2018-03-18 20:11:45      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:传递数据   element   rip   false   error   UNC   欢迎来到   nop   ash   

基于WebSocket实现聊天室(Node)

WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力

本文作为学习websocket的练习,实现在线聊天的功能

服务端

server.js

const http = require(‘http‘)
const fs = require(‘fs‘)
const ws = require(‘ws‘)

// 创建服务
let server = http.createServer(function (req, res) {
    res.writeHead(200, {‘Content-Type‘: ‘text/html;charset=utf8‘})
    // 显示页面内容
    fs.readFile("index.html", function (err, data) {
        if (err)
            return console.error(err);
        res.end(data)
    });
}).listen(8000)

// 服务端定义web socket server
let wss = new ws.Server({server})

// 存放socket
let clientMap = {}

// 计数器
let count = 0

// 客户id
let id = 0
let d = new Date()

// 客户端连接服务端时,回调函数会接受一个socket对象
wss.on("connection", function (socket) {
    count ++;
    id ++;
    // 添加用户
    socket.id = id
    clientMap[id] = socket
    console.log("第" + count + "位用户上线了,ID为" +id)
    socket.send("欢迎来到聊天室,已经有"+count+"位用户在线")

    // 监听客户端数据
    socket.on("message", function (msg) {
        // 广播消息
        for(let id in clientMap){
            console.log(id)
            console.log(socket.id)
            if(id === socket.id.toString())
                clientMap[id].send(d.toLocaleTimeString() + " 我: "+ msg)
            else
                clientMap[id].send(d.toLocaleTimeString() + " " + socket.id +"号: "+ msg)
        }
    })

    // 监听客户下线
    socket.on("close", function (e) {
        // 删除用户
        count --;
        console.log(socket.id + "号用户"  + "下线")
        delete clientMap[socket.id]
    })

    // 错误连接
    socket.on("error", function (err) {
        console.log("客户连接错误" + err)
    })
})

客户端

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>聊天室</title>

    <style>
        #room {
            border: solid;
            margin: 2px;
            width: 400px;
            height: 500px;
            overflow-y: scroll;
        }
    </style>

</head>

<body>
    <div id="room"></div>
    <input type="text" id="msg">
    <button id="send">发送</button>
    <!--客户端脚本-->
    <script>
        // 定义web socket client
        let wsc = new WebSocket("ws://localhost:8000")
        let serverError = false
        let room = document.getElementById("room")
        let inputText = document.getElementById("msg")

        // 建立连接
        wsc.onopen = function (e) {
            console.log(‘成功进入聊天室‘)
        }

        // 获取后端消息
        wsc.onmessage = function (e) {
            room.innerHTML +=‘<p>‘+e.data+‘</p>
        }

        // 关闭
        wsc.onclose = function (e) {
            alert("聊天室已经关闭")
            serverError = true
        }

        // 错误
        wsc.onerror = function () {
            console.log("连接错误")
        }

        // 发送信息
        sendMsg = function () {
            let s = inputText.value
            if (serverError) {
                alert("聊天室已经关闭")
            }
            else if (msg.value === "") {
    //            alert("发送内容不能为空")
            } else {
                wsc.send(s)
                inputText.value = ""
            }
        }

        // 注册发送信息的事件
        send.onclick = sendMsg
        document.onkeydown = function(evt){
            if(evt.code === "Enter")
                sendMsg()
        };
    </script>
</body>
</html>

运行结果

运行

$ node server.js

开启不同浏览器,或同一浏览器的多个tab,访问localhost:8000,就可以实习聊天功能

技术分享图片

服务端输出:

$ study node server.js
第1位用户上线了,ID为1
第2位用户上线了,ID为2
第3位用户上线了,ID为3
3号用户下线
2号用户下线
1号用户下线

小结

感觉Websocket非常优雅,后端变得主动才好嘛~

基于WebSocket实现聊天室(Node)

标签:传递数据   element   rip   false   error   UNC   欢迎来到   nop   ash   

原文地址:https://www.cnblogs.com/fanghao/p/8596670.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!