首先我们需要了解，什么是websocket，它的作用和优势是什么，为什么要用它。
什么是websocket?
websocket是基于TCP的一种双向通信协议。在此之前，一直是采用轮询的方式进行双向通信，这种方式效率低下还非常浪费资源。为了解决这种问题，websocket应运而生。
特点：
双向通信
websocket使得客户端跟服务端之间交换数据变得更加简单。允许服务器主动向客户端推送数据。浏览器只需要和服务器完成一次握手，就可以创建持久性的连接，并进行双向数据传输。
实时性强
服务器可以主动给客户端推送数据，相比http请求需要先由客户端发起请求，浏览器才会响应，延迟明显更少、时间更短。
连接保持
websocket连接创建成功后，只要连接不断开，通信会一直保持，而且还会省略部分状态信息（http请求可能每次请求都需要携带状态信息）
相对于http，websocket优势显而易见。所以在一些实时通信上，都需要用到websocket，比如多媒体聊天、玩家游戏、页面局部刷新、协同编辑等场景。
介绍完了什么是websocket，下面介绍下如何使用websocket。
WebSocket 的用法很简单：
var ws = new WebSocket("ws://localhost:8181");
// 指定连接成功后的回调函数
ws.onopen = function() {
// 向服务器发送数据，数据类型包括文本类型/blob对象/ArrayBuffer对象
ws.send("Hello WebSockets!");
};
// 指定收到服务端数据后的回调函数
(注意：返回数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）)
ws.onmessage = function(e) {
console.log( "收到服务端信息: " + e.data);
ws.close(); // 关闭websocket连接方法
};
// 指定连接关闭后的回调函数
ws.onclose = function() {
console.log("连接已关闭");
}; 然后是服务端，服务端需要下载nodejs-websocket：
npm i nodejs-websocket
nodejs-websocket文档地址 这个文档里详细描述了如何使用，这里不做赘述。直接上代码展示双方通信效果：
客户端：
（这里使用了vue框架搭建项目，把该方法放进vue页面即可,多余代码不再多写）
export default {
mounted () {
this.contactSocket()
},
methods: {
contactSocket () {
if (window.WebSocket) {
const ws = new WebSocket('ws://192.168.1.124:8181')
ws.onopen = function () {
console.log('连接服务器成功')
ws.socket.send('你好服务器')
}
ws.onmessage = function (e) {
alert(e.data)
}
ws.onclose = function () {
console.log('连接已关闭')
}
} else {
console.log('当前浏览器不支持WebSocket！')
}
}
}
}服务端：
（这里是命名为server.js的文件，放在了vue项目的根目录，启动时候需要启动node服务，终端拆分一个端口，输入：node server.js）
const ws = require('nodejs-websocket')
ws.createServer(function (conn) {
conn.on('text', function (data) { // 收到客户端数据的回调方法
conn.sendText(data) // 把客服端发送过来的信息再发回去
})
conn.on('close', function (e) { // 关闭服务器的回调方法
console.log(e, '服务端连接关闭')
})
conn.on('error', function (e) { // 服务端连接异常的回调方法
console.log(e, '服务端异常')
})
}).listen(8181) // 监听8181端口，跟客户端连接端口对应
console.log('服务端已开启')
代码放上去后，启动服务端，终端显示：服务端已开启；页面将弹出：你好服务器。说明websocket连接成功，恭喜你，完成了websocket的双向通信！
到此这篇关于websocket结合node.js实现双向通信的示例代码的文章就介绍到这了,更多相关websocket node.js双向通信内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
