websocket——做一个简单聊天室

最新推荐文章于 2024-06-07 16:02:01 发布

autm许

最新推荐文章于 2024-06-07 16:02:01 发布

阅读量372

点赞数

分类专栏：前端 js

本文链接：https://blog.csdn.net/qq_17108919/article/details/108772200

版权

前端同时被 2 个专栏收录

35 篇文章 0 订阅

订阅专栏

26 篇文章 2 订阅

订阅专栏

实现简单聊天室要求
1.允许多人加入聊天室，允许多人发送消息
2.谁进来了聊天室，谁离开了聊天室
3.谁发了消息
4.消息类型颜色不一样
最终如下图效果
在这里插入图片描述
1.websocket服务代码。server.js

const wx = require('nodejs-websocket');
/**
 * 分析
 * 		消息不应该是简单的字符串
 * 		这个消息应该是一个对象
 * 		type：消息类型 0：用户进入，1：用户离开，2，正常聊天
 * 		msg：消息的内容
 * 		time：聊天的具体时间
 */

 const type_enter = 0
 const type_leave = 1
 const type_msg = 2

let count = 0 // 记录当前连接上来的总的用户数据

const server = wx.createServer(conn => {
	// conn每个连接到服务器的用户，都会有一个conn
	count++
	// 给用户取名字
	conn.userName = `用户:‘${count}’` 

	//1. 告诉所有用户，有人加入聊天室
	broadcast({
		type: type_enter,
		msg: `${conn.userName}-进入-聊天室`,
		time: new Date().toLocaleTimeString()
	})

	// 接收到了浏览器的数据
	conn.on('text', data => {
		broadcast({
			type: type_msg,
			msg: data,
			time: new Date().toLocaleTimeString()
		})
	})
	
	// 关闭连接的时候，触发
	conn.on('close', data => {
		count--
		broadcast({
			type: type_leave,
			msg: `${conn.userName}离开聊天室`,
			time: new Date().toLocaleTimeString()
		})
	})
	
	// 发生异常，触发
	conn.on('error', data => {
		console.log('发生异常');
	})
})

// 广播，给所有的用户发送消息
function broadcast(msg) {
	// server.connections:表示所有的用户
	server.connections.forEach(item => {
		item.send(JSON.stringify(msg))
	})
}

server.listen(3000, () => {
	console.log('监听了端口3000')
})

2.html代码，index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>聊天室WebSocket</title>
  <style>
  </style>
</head>
<body>
  <input type="text" placeholder="输入你的内容">
  <button>发送</button>
  <div></div>
  <script>
    let input = document.querySelector('input')
    let button = document.querySelector('button')
    let div = document.querySelector('div')
    // h5已经直接提供了WebSocket的api，所以我们可以直接去使用
    
    //1. 创建WebSocket
    // 参数1，WebSocket的服务地址
    let socket = new WebSocket('ws://127.0.0.1:3000')

    //2. open 当和WebSocket服务连接成功的时候触发
    socket.addEventListener('open', () => {
      div.innerHTML = '连接服务成功了'
    })

    // 3.主动的给webSocket服务发送消息
    button.addEventListener('click', () => {
      let val = input.value
      socket.send(val)
      // 发送消息后，立马清空input值
      input.value = ''
    })

    // 4.接收webSocket服务的数据
    socket.addEventListener('message', (e) => {
      console.log(e);
      let data = JSON.parse(e.data);
      var p = document.createElement('p')
      if (data.type === 0) {
        p.style.color = 'green'
      } else if (data.type === 1) {
        p.style.color = 'red'
      } else {
        p.style.color = 'blue'
      }
      time = data.time.split(' ')
      console.log(time)
      p.innerHTML = data.msg + '&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp' + time[0]
      div.appendChild(p)
    })
  </script>
</body>
</html>

3.启动服务
在这里插入图片描述
4.打开多个窗口进行多人聊天对话

autm许

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
websocket——做一个简单聊天室

实现简单聊天室要求1.允许多人加入聊天室，允许多人发送消息2.谁进来了聊天室，谁离开了聊天室3.谁发了消息4.消息类型颜色不一样最终如下图效果1.websocket服务代码。server.jsconst wx = require('nodejs-websocket');/** * 分析 * 消息不应该是简单的字符串 * 这个消息应该是一个对象 * type：消息类型 0：用户进入，1：用户离开，2，正常聊天 * msg：消息的内容 * time：聊天的具体时
复制链接

扫一扫