基于node建立聊天室浅谈

最新推荐文章于 2022-01-17 20:08:24 发布

关河梦断

最新推荐文章于 2022-01-17 20:08:24 发布

阅读量154

点赞数

分类专栏： JavaScript 文章标签：聊天室搭建

本文链接：https://blog.csdn.net/qq_39039287/article/details/96464114

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

此项目是搭建一个简单的聊天室，并没有做登录优化，分享的是在nodejs环境下搭建一个websocket然后创建静态服务器，构建一个简单的聊天室功能。
1.开始建立WebSocket Web服务器

//需要node环境下安装ws 
const WebSocket = require('ws')
const ws = new WebSocket.Server({
    port: 8070,//可以根据情况设定 1-10000随便用本地端口
    host: '10.31.158.42'
})
let count = 0
const clients = {}//此处用了常量定义对象是根据对象的地址在栈里面，是不变的，值是存到了堆里面
ws.on('connection', client => {//连接，接受数据
    client.name = ++count//将数据以数字形式保存起来
    clients[client.name] = client//对象的属性为数字，属性值为传过来的值

    client.on('message', msg => {
        console.log(`客户端${client.name}说：${msg}`)
        boardCaster(client, msg)
    })

    client.on('close', () => {//关闭客户端是，服务器端执行的代码
        delete clients[client.name]
        console.log(`客户端${client.name}下线了`)
    })
})

function boardCaster(client, msg) {
    for (var key in clients) { //封装函数，对所有客户端进行遍历，指向谁要发言，然后输出
        clients[key].send(`客户端${client.name}说：${msg}`)
    }
}

2.搭建静态服务器

const express = require('express')
const path = require('path')//内置模块
const app = express()
const port = 8080 //这个端口和web服务器的端口是不能相同的
const host = '10.31.158.42'
app.use(express.static(path.join(__dirname, 'client')))//将获取的路径指向HTML所在的文件夹
//问题： 如果不指定静态资源目录，那么express启动的服务器就认为 /client/index.html 是一个路由
// 解决： 指定静态资源目录
app.listen(port, host, () => {
    console.log(`服务器运行在：http://${host}:${port}`)
})

3.创建一个简单的聊天室HTML页面（此页面处于client文件夹下面）

<!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>WebSocket</title>
</head>
<body>
    <h1> 聊天室 </h1>
    <div id="content" name="name" style="overflow-y: scroll; width: 400px; height: 300px; border: solid 1px #000"></div>
    <br />
    <div>
        <input type="text" id="msg" style="width: 200px;">
    </div>
    <!-- <button id="submit">提交</button> -->
<script src="WsClient.js" charset="utf-8"></script>
<script>
    var submit = document.querySelector('#submit')
    var msg = document.querySelector('#msg')
    // submit.onclick = function () {
    //     ws.send( msg.value ) //将信息发送通信服务器
    //     msg.value = ''
    // }

    document.onkeyup = function ( e ) {
        if ( e.keyCode === 13 ) {
            ws.send( msg.value )//将信息发送通信服务器
            msg.value = ''
        }
    }

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

4.在client文件夹下面创建连接通信的js文件

/* 
  这个文件是用于客户端连接通信服务器
*/
const url = 'ws://10.31.158.70:5000'
const ws = new WebSocket( url )//此路径指向web服务器
ws.onopen = () => { //初次连接
  ws.send('我进入了xxx的直播间')
}
ws.onmessage = msg => {
  var content = document.querySelector('#content')
  console.log( msg )
  content.innerHTML += msg.data + '<br/>'//将返回的值重新赋值给聊天面板
}

关河梦断

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
基于node建立聊天室浅谈

开始建立WebSocket Web服务器const WebSocket = require('ws')const ws = new WebSocket.Server({ port: 8070, host: '10.31.158.42'})let count = 0const clients = {}ws.on('connection', client => {...
复制链接

扫一扫