nodejs实现websocket实例（0分资源）资源-CSDN文库

共3个文件

html：2个

js：1个

node

websocket

nodejs

1星需积分: 34 82 浏览量 2017-07-06 09:37:56 上传评论收藏 2KB RAR 举报

WebSocket是Web应用中实现双向通信的关键技术，它允许服务器与客户端之间进行实时、低延迟的数据交换。在Node.js环境中，WebSocket的实现主要依赖于第三方库，如`ws`。本实例将详细介绍如何在Node.js中使用`ws`库来创建一个WebSocket服务器，并演示如何与浏览器端进行交互。我们需要安装`ws`库。在终端中，进入包含`ws.js`文件的目录，然后执行以下命令： ```bash npm install ws ``` 这将安装`ws`库，使你可以在项目中使用WebSocket功能。 `ws.js`文件通常会包含以下基本结构： ```javascript const WebSocket = require('ws'); // 创建WebSocket服务器 const wss = new WebSocket.Server({ port: 8080 }); // 当有新的连接时触发 wss.on('connection', (ws) => { console.log('Client connected'); // 接收客户端发送的消息 ws.on('message', (message) => { console.log(`Received message => ${message}`); // 向所有已连接的客户端广播消息 wss.clients.forEach((client) => { if (client.readyState === WebSocket.OPEN) { client.send(message); } }); }); // 当客户端断开连接时触发 ws.on('close', () => { console.log('Client disconnected'); }); }); ``` 这段代码创建了一个监听8080端口的WebSocket服务器。当有新客户端连接时，会打印“Client connected”。当接收到客户端的消息时，服务器会将该消息广播给所有其他在线客户端。当客户端断开连接时，服务器会显示“Client disconnected”。为了测试这个WebSocket服务器，你需要在同一个目录下有两个HTML文件，分别在两个不同的浏览器（最好是Chrome，因为其对WebSocket支持良好）中打开。这两个文件可以包含基本的JavaScript代码来创建WebSocket连接并发送/接收消息，例如： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>WebSocket Test</title> </head> <body> <input type="text" id="messageInput"> <button onclick="sendMessage()">发送</button> <ul id="messageList"></ul> <script> const socket = new WebSocket('ws://localhost:8080'); socket.addEventListener('open', (event) => { console.log('Connected to WebSocket server'); }); socket.addEventListener('message', (event) => { const messageList = document.getElementById('messageList'); const li = document.createElement('li'); li.textContent = event.data; messageList.appendChild(li); }); function sendMessage() { const input = document.getElementById('messageInput'); const message = input.value; input.value = ''; socket.send(message); } </script> </body> </html> ``` 这个HTML文件创建了一个输入框让用户输入消息，一个按钮用于发送消息，以及一个列表用于展示收到的消息。当用户点击“发送”按钮时，JavaScript会通过WebSocket向服务器发送输入的消息，并更新页面上的消息列表。这个Node.js WebSocket实例展示了如何使用`ws`库创建一个WebSocket服务器，以及如何在浏览器端建立连接、发送和接收消息。在实际应用中，你可以根据需求扩展这些基础功能，例如实现身份验证、错误处理、特定消息类型解析等。通过这种方式，WebSocket能够为实时应用（如聊天室、游戏、股票报价等）提供强大的支持。

资源推荐

资源详情

资源评论

收起资源包目录

node&websocket.rar （3个子文件）

node&websocket

ws.js 798B

game1.html 1KB

game2.html 893B

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .kuang{text-align: center;margin-top:200px;} #mess{text-align: center} .value{width: 200px;height:200px;border:1px solid;text-align: center;line-height: 200px;display: inline-block;} </style> </head> <body> <div id="mess">正在连接...</div> <div class="kuang"> <div class="value" id="value1">小明小明</div> <div class="value" id="value2">大胸大胸</div> <div class="value" id="value3">小张小张</div> </div> <script> var mess = document.getElementById("mess"); if(window.WebSocket){ var ws = new WebSocket('ws://127.0.0.1:8001'); ws.onopen = function(e){ console.log("连接服务器成功"); ws.send("game1"); } ws.onclose = function(e){ console.log("服务器关闭"); } ws.onerror = function(){ console.log("连接出错"); } ws.onmessage = function(e){ mess.innerHTML = "连接成功" document.querySelector(".kuang").onclick = function(e){ var time = new Date(); ws.send(time + " game1点击了“" + e.target.innerHTML+"”"); } } } </script> </body> </html>

评论收藏

内容反馈