node+WebSocket的使用方法

本文详细介绍了如何使用WebSocket创建连接,管理数据交换,并展示了通过Node.js实现的服务器端和客户端通信实例,包括单对单和多终端群聊功能。涵盖了WebSocket对象的使用、事件监听和常见技术库的整合。
摘要由CSDN通过智能技术生成

WebSocket对象提供了一组API,用于创建和管理WebSocket连接,以及通过连接发送和接收数据

创建WebSocket对象
var ws = new WebSocket(url,[protocols]);
url:表示要连接的URL,这个URL应该为响应WebSocket的地址
protocols:可以是一个单个的协议名字字符串或者包含多个协议名字字符串的数组

方法:

close([code][,reason])//关闭WebSocket连接或者停止正在进行的连接请求
code:一个数值表示关闭连接的状态号,表示连接被关闭的原因
reason:一个可读的字符串,表示连接被关闭的原因
send(data)通过WebSocket连接向服务器发送数据
data:发送的数据

属性:
onclose:用于监听连接关闭事件监听器
onerror:当错误发生时用于监听error事件的事件监听器
onmessage:触发消息事件的监听器
onopen:一个用于连接打开事件的事件监听器
readyState:连接的当前状态:0:连接还没开启 1:连接已经开启并且准备好进行通信
2.连接正在关闭的过程中 3.连接已经关闭

需要用到的npm包:
npm install websocket

app.js

//创建后台服务器
var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer();

//创建WebSocket服务器
wsServer = new WebSocketServer({
	//选择刚刚创建的http后台服务器为WebSocket服务器
	httpServer:server
})

//WebSocket服务器建立请求连接
wsServer.on('request',function(request){
	//当前的连接
	var connection = request.accept(null,request.origin);
	connection.sendUTF('服务器发来消息说已经建立连接');
	//监听有信息来的时候
	connection.on('message',function(message){
		if(message.type === 'utf8'){
			connection.sendUTF(message.utf8Data);
		}
		else if(message.type === 'binary'){
			connection.sendBytes(message.binaryData);
		}
	});
	//监听关闭
	connection.on('close',function(reasonCode,description){
		console.log('连接关闭')
	})
})

server.listen(3000,funtion(){
	console.log('服务器开启成功,请打开localhost:3000');	
})

app.html

var ws = new WebSocket('ws://localhost:3000');
//监听建立连接
ws.onopen = function(res){
	console.log('连接成功');
	console.log(res);
}
//监听消息
ws.onmessage = function(res){
	console.log('客户端接收到了服务端发来的消息');
	console.log(res);
}

使用node app.js执行后,打开app.html,连接已经建立成功
在这里插入图片描述

多个终端通过WebSocket实现通信

var WebSocketServer = require('websocket').server;
var http = require('http');
var server = http.createServer();

wsServer = new WebSocketServer({
	//选择刚刚创建的http后台服务器为WebSocket服务器
	httpServer:server
})
//储存所有终端的连接
var c = [];
wsServer.on('request',function(request){
	//当前的连接,request.origin为请求的信息
	var connection = request.accept(null,request.origin);
	connection.sendUTF('服务器发来消息说已经建立连接');
	//把连接储存起来
	c.push(connection);
	//监听有信息来的时候
	connection.on('message',function(message){
		if(message.type === 'utf8'){
			//给每一个连接都发送数据
			c.forEach(function(item){
				item.sendUTF(message.utf8Data);	
			})
			
		}
		else if(message.type === 'binary'){
			c.forEach(function(item){
					item.sendBytes(message.binaryData);
				})
			
		}
	});
	//监听关闭
	connection.on('close',function(reasonCode,description){
		//某个连接删除的时候,删除数组c中储存的对应连接
		//获取当前索引
		var index = c.indexOf(connection);
		//删除
		c.splice(index,1);
		console.log('连接关闭')
	})
})

server.listen(3000);

在这里插入图片描述

使用express和socket.io优化WebSocket代码
npm install express
npm install socket.io

var express = require('express');
var app = express();
app.all("*",function(req,res,next){
  //设置允许跨域的域名,*代表允许任意域名跨域
  res.header("Access-Control-Allow-Origin","*");
  //允许的header类型
  res.header("Access-Control-Allow-Headers","Origin,X-Requested-With,Accept,Content-type");
  res.header("Access-Control-Allow-Credentials",true);
  //跨域允许的请求方式
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("Content-Type","application/json;charset=utf-8")
  if (req.method.toLowerCase() == 'options')
    res.sendStatus(200);  //让options尝试请求快速结束
  else
    next();
});
//使用app作为中间件开启WebSocket服务器,express框架的其他功能也都能使用
//必须用server监听端口,不会报错
var server = require('http').createServer(app);
var io = require('socket.io')(server,{ cors: true });
//socket服务器监听连接,表示已经建立连接
io.on('connection',function(socket){
	//向当前请求连接的客户端发送一个消息
	//socket.emit('request',/**/);
	//向所有客户端发送消息
	//io.emit('msg',/**/);
	//监听客户端发来的消息
	socket.on('send',function(data){
		console.log('客户端发来'+data);
		//将客户端发来的消息推送给全部的客户端
		io.emit('msg',data);
	})
})

server.listen(3000);

服务端或者客户端的emit(‘msg’,data);为另一个端监听的事件:
例如:后端将客户端发来的消息推送给全部的客户端
io.emit(‘msg’,data);
前端就需要监听msg事件,反之亦然

前台页面
socket.io下载地址:https://github.com/socketio/socket.io
在这里插入图片描述

	<script src='socket.io.js'></script>
	var socket = io('ws://localhost:3000')
	//监听客户端事件推送
	socket.on('connect',function(){
		console.log('连接成功');
		socket.emit('send',username);
	});
	//监听msg数据对象
	socket.on('msg',function(data){
		console.log(data);
	});
	//
	socket.on('disconnect',function(){
		console.log('断开连接');
	})
	
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值