使用Node+websocket实现简易1v1聊天室(前端+服务器)

本文档详细介绍了如何使用Node.js和WebSocket技术创建一个简单的1v1聊天室。首先确保安装了Node环境,然后通过npm初始化项目并安装WebSocket库。在Node.js中编写服务器代码,并创建两个HTML页面作为用户A和用户B的界面。当用户A或B发送消息时,服务器会将消息广播给所有在线用户。用户端根据消息来源在页面上分别显示左右两侧。尽管功能简单,但需注意页面刷新后需重启服务。
摘要由CSDN通过智能技术生成

使用Node+websocket实现简易1v1聊天室(前端+服务器)

前提:

安装好node环境~~~ 可使用 node -v 和 npm -v 查看是否装好

实现逻辑:

用户A 用户B 服务器
用户A->进入聊天室(和服务器建立连接)->向服务器发送数据(两种情况:一.只有用户A在聊天室,那服务器只向用户A返回聊天内容 二.用户B也在聊天室,服务器需要对用户A和用户B同时返回聊天内容) ->返回的聊天内容 用户A对内容进行判断,若为用户A发送的消息,渲染在页面右边,若为用户B发送消息,渲染在页面左边

用户B 同理

1.新建一文件夹,在该目录下的命令行 输入 npm init 初始化项目

2.在该目录下的命令行输入 npm install nodejs-websocket 安装websocket

3.在该目录下新建个js文件(例:websocket.js) ,然后将 下面的node代码复制进去

4.新建两个html文件, 分别将两个页面的代码复制进去

5.在该目录下的命令行输入 node + 你的js文件名 (node websocket.js) 然后回车执行

6.接着打开两个html文件,即可开始聊天

em~~功能不够完善,如果刷新了页面,你可以 两次 ctrl+c 结束项目 重新启动

安装websocket

//npm install nodejs-websocket
node代码
// websocket.js

var ws = require("nodejs-websocket");
console.log("开始建立连接...")

//sendText只能发送字符串 所以对要发送的数据进行处理
function sendToOne(origin,text,type){
   
	return JSON.stringify({
   
		uid:origin,
		text,
		type
	})
}
//首先  websocket的connect是单向发送,即从哪来的请求发送回哪去
//所以会有userOne和userTwo来替代connect分别向user1和user2发送消息

//sendResult 抽取了公共代码 user1和user2第一次进入服务器时所需要进行和只有一方在服务器时所需要进行的操作  (当只有一方在服务器时的代码需要完善)
function sendResult(obj,connect){
   
	return obj.type==='test'?connect.sendText(sendToOne(obj.uid,obj.userName+'连接成功',obj.type)):connect.sendText(sendToOne(obj.uid,obj.text,obj.type));
}
var  userOne = null,userTwo = null,user1Ready = false , user2Ready = false;
var server = ws.createServer(function(connect){
   
    connect.on("text", function (strObj) {
   
		var req = JSON.parse(strObj)
        
        //当双方都在服务器上时  即可正常聊天
		if(user1Ready&&user2Ready){
   
		    userOne.sendText(strObj);
		    userTwo.sendText(strObj);
		}
		else if(req.userName=='user1'){
   
			userOne = connect;
			user1Ready = true;
			sendResult(req,userOne)
		}else if(req.userName=='user2'){
   
			userTwo = connect;
			user2Ready = true;
			sendResult(req,userTwo)
		}
		
		
		if(!(user1Ready||user2Ready)){
   
			console.log(user1Ready,user2Ready)
			 connect.sendText('连接失败')
		}

       
    })
    connect.on("close", function (code, reason) {
   
		console.log("code:",code)
		console.log("reason:",reason)
        console.log(
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值