运用h5的webSocket写聊天室

最新推荐文章于 2021-12-09 10:26:12 发布

时倾௸

最新推荐文章于 2021-12-09 10:26:12 发布

阅读量474

点赞数 1

文章标签： html css js web

本文链接：https://blog.csdn.net/m0_46390103/article/details/106930681

版权

前端通信（3种方法）

后端编程语言 || Node 提供的一中
Node net.socket
html5提供的一种方式
webSocket
IE 使用的
socket.io

我这里主要写的是h5写的聊天室代码如下：
1.首先我们要搭建服务器 socketServer.js文件

//! 服务器
const ws = require('ws')
const host = '10.31.162.72'
const port = 9000
const server = new ws.Server({
   
    host,
    port
})

let count = 10000
const clients = []
    // 获取客户端进行编号，然后存储它，广播它的数据
server.on('connection', client => {
   
    client.name = ++count
    clients[client.name] = client
        // 获取数据
    client.on('message', msg => {
   
            msg.name = client.name
            console.log(msg.toString())
            boradcast(client, msg)
        })
        // 错误处理
})

function boradcast(client, msg) {
   
    for (let key in clients) {
   
        clients[key].send(msg.toString())
    }
}


server.on('listening', () => {
   
    console.log(`The server is running at: ws://${
     host}:${
     port}`)
})

2.我们要搭建展示界面的服务器的 viewServer.js文件

//! 展示界面的服务器
const express = require('express')
const app = express()
const PORT = 3000
const HOST_NAME = '10.31.162.72'
const path = require('path')

app.use(express.static(path.join(__dirname, './client')))

app.listen(PORT, HOST_NAME, () => {
   
    console.log(`网页展示的url是: http://${
      HOST_NAME }:${
      PORT }`)
})

3.现在开始写客户端页面 index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 直播聊天室 </title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <di