您的位置：首页 > Web前端 > Node.js

WebSocket学习(三)——使用nodejs搭建WebSocket服务器

2017-09-18 16:46 691 查看

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

我有篇文章讲了下用nodejs搭建http服务器（关联文章）

下面讲下用nodejs搭建WebSocket服务器

1、首先用cmd打开控制台输入nmp install websocket

2、编写一个wsServer.js文件

// 引入WebSocket模块
var ws = require('nodejs-websocket')
var PORT = 3000

// on就是addListener，添加一个监听事件调用回调函数
// Scream server example:"hi"->"HI!!!",服务器把字母大写
var server = ws.createServer(function(conn){
console.log('New connection')
conn.on("text",function(str){
console.log("Received"+str)
// conn.sendText(str.toUpperCase()+"!!!") //大写收到的数据
conn.sendText(str)  //收到直接发回去
})
conn.on("close",function(code,reason){
console.log("connection closed")
})
conn.on("error",function(err){
console.log("handle err")
console.log(err)
})
}).listen(PORT)

console.log('websocket server listening on port ' + PORT)

这个服务器实现了把客户端传入的小写字母转换为大写

如注释，先要引入WebSocket模块，然后创建一个服务，并为其添加一个监听，其中自带了一些事件的监听，如text、close、error，用sendText（）发送数据

通过从cmd用node wsSocket启动服务器

3、前台界面编写

在之前WebSocket学习(二)——使用官方的服务器实现WebSocket的基础上改动一点

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebSocket</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text"/>
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
// //官方示例的服务器
// var WebSocket = new WebSocket("ws://echo.websocket.org");
// wsServer搭建的服务器
var WebSocket = new WebSocket("ws://localhost:3000/");
WebSocket.onopen = function(){
console.log('websocket open');
document.getElementById("recv").innerHTML = "Connected";
}
WebSocket.onclose = function(){
console.log('websocket close');
}
WebSocket.onmessage = function(e){
console.log(e.data);
document.getElementById("recv").innerHTML = e.data;
}
document.getElementById("sendBtn").onclick = function(){
var txt = document.getElementById("sendTxt").value;
WebSocket.send(txt);
}
</script>
</body>
</html>

可以看到把服务器的地址改为本机了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： WebSocket

相关文章推荐

新的分享

章节导航