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

一步一步教您用websocket+nodeJS搭建简易聊天室（2）

2017-11-14 17:50 651 查看

摘要: 本节完成功能：向服务器发送消息，服务器将消息中字母转换成大写并加上三个感叹号返回到客户端显示出来。

在上节中，带大家了解了一下websocket的基本原理，并完成了第一个基于websoket的聊天室项目，但是这个项目后端用的不是自己的，所以这节教大家如何用node.js搭建自己的服务端。

本节完成功能：向服务器发送消息，服务器将消息中字母转换成大写并加上三个感叹号返回到客户端显示出来。

首先我们参考http://www.runoob.com/nodejs/nodejs-install-setup.html中的教程安装node.js运行环境，安装完成后在终端输入下面命令：

node --version

如果安装成功，会出现node.js的版本信息：

接下来新建webSocketDemo2文件夹，新建终端切换进该文件夹
我们按照https://github.com/sitegui/nodejs-websocket里面教程安装nodejs-websocket模块，
即在终端运行命令

npm install nodejs-websocket

终端运行成功后，会在webSocketDemo2文件夹下出现node_modules的文件夹。

我们建立一个新的文件wsServer.js，内容如下：

var ws = require("nodejs-websocket")
var port=3000;
// 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.on("close", function (code, reason) {
console.log("Connection closed")
})
conn.on("error", function (err) {
console.log("handdle error");
console.log(err);
})
}).listen(port);
console.log("websocket server listening on port "+port);

然后我们通过在终端运行以下命令，将server运行起来：

node wsServer.js

把上节中的index.html拷一份到webSocketDemo2文件夹中，然后将其中的服务器地址改成本地的，即：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>websocket</title>
</head>
<body>
<h1>echo test</h1>
<input id="sendText" type="text" />
<button id="sendBtn">发送</button>
<div id="recv"></div>
</body>
<script type="text/javascript">
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("sendText").value;
websocket.send(txt);
}
</script>

</html>

至此，功能完成，项目运行截图：

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

标签： html5 WebSocket Node.js

相关文章推荐

新的分享

章节导航