poison
poison
4天前 · 1 人阅读

在进行webSocket实践总结之前,怎么也得对webSocket有一个简单、大体的学习与了解。
于是在进行实现一个简单的webSocket聊天代码实例之前我们可以先去读一读,来自阮大神的博客:webScoket

准备

HTML和CSS基础知识
JS基础知识
用过NodeJS

开始

一、最简单的websocket体验
  1. 在桌面文件新建一个socket文件夹,根目录下新建demo1文件夹,该文件夹下新建一个index.html 。
    源代码如下:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
</head>
<body>
    <h1>Socket Test</h1>
    <input type="text" id="lmz_sendText">
    <button id="lmz_sendBtn">发送</button>
    <div id="lmz_recv"></div>
    <br>
    <span>欢迎关注[六个周]公众号</span>
    <script type="text/javascript">
        var websocket = new WebSocket("ws://echo.websocket.org/");
        websocket.onopen = function(){
            console.log("open 了");
            document.getElementById("lmz_recv").innerHTML="Connected";
        }
        websocket.close = function(){
             console.log("close 了");
        }
        websocket.onmessage = function(e){
            console.log(e.data);
             document.getElementById("lmz_recv").innerHTML=e.data;
        }

         document.getElementById("lmz_sendBtn").onclick = function(){
             var txt =  document.getElementById("lmz_sendText").value;
             websocket.send(txt);
         }
    </script>
</body>
</html>

阅读以上源代码,非常清晰,主要是四个方法:.onopen.onclose.onmessage.send

打开浏览器进行调试,进入页面时,页面初始显示为:

1.png

在框中输入文字点击发送,页面显示为如下:

2.png

解析:我们在最初的这个demo中使用的是websocket的server(ws://echo.websocket.org/),可以通过浏览器的调试窗口看到:

3.png
二、使用node搭建一个自己的websocket_server

首先确保本地安装了node

  1. 首先在socket文件夹下新建一个demo2文件夹。终端进入到demo2文件夹下,执行脚本命令npm init
  2. github上搜索 # nodejs-websocket,在该文件下继续执行脚本命令:npm install nodejs-websocket,此时的项目结构是这样的:
npm.png

3.在demo2文件夹下新建一个wsServer.js服务,依据github上说明将代码copy到wsServer.js中,代码附上(服务端做的是一个将小写转换为大写的操作):

//wsServer.js
var ws = require("nodejs-websocket")

// 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")
    })
}).listen(8001)

4.将我们开始的index.html文件复制下来,修改ws://echo.websocket.org/服务为ws://localhost:8001/
5.测试--终端中执行脚本命令:node wsServer.js,浏览器与服务器的显示如下:

wsServer.png
三、实现简单聊天功能-1

1.首先在socket目录下将demo2复制一份为demo3,修改index.html文件与wxServer.js文件即可。
2.修改index.html的项目局部业务代码

index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket</title>
</head>
<body>
<h1>Socket Test</h1>
<input type="text" id="lmz_sendText">
<button id="lmz_sendBtn">发送</button>
<script type="text/javascript">
    var websocket = new WebSocket("ws://localhost:8001/");
    function showMessage(str){
        var div = document.createElement("div");
        div.innerHTML = str;
        document.body.appendChild(div);
        }

    websocket.onopen = function(){
        console.log("open 了");
        document.getElementById("lmz_sendBtn").onclick = function(){
         var txt =  document.getElementById("lmz_sendText").value;
         if(txt){
            websocket.send(txt);
         }
     }
    }
    websocket.close = function(){
         console.log("close 了");
    }
    websocket.onmessage = function(e){
        console.log(e.data);
        showMessage(e.data)
    } 
    </script>
</body>
</html>

3.修改wxServer.js代码,实现简单的聊天功能.

var ws = require("nodejs-websocket")
var PORT = 8001

var clientCount = 0;//客户端数量

var server = ws.createServer(function (conn) {
console.log("New connection")
clientCount++
conn.nickname = "user" + clientCount //定义进来聊天群人的nickname
broadcast(conn.nickname +" comes in") //每当有人进来就发布一个广播
conn.on("text", function (str) {
    console.log("Received "+str)
    broadcast(str)//每当有人发送信息就有一个广播
})
conn.on("close", function (code, reason) {
    console.log("Connection closed")
    broadcast(conn.nickname +" left") //每当有人离开就发布一个广播
})
}).listen(PORT)

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

function broadcast(str){
server.connections.forEach(function(connection){
    connection.sendText(str)
})
}

4.测试:在对上述两个文件代码进行修改后,我们在终端中进入到node3项目目录下,node运行成功后,先打开一个窗口(user1.png),再打开一个窗口(user2.png),再打开一个窗口(user3.png)。效果如下:

user1.png
user2.png
user3.png

紧接着,我们在窗口三的input框输入一段文字,点击发送,三个窗口同时输出了input框内容,则说明代码运行成功,效果如图。

user-enter.png

页面的简单优化以及有关socket.io方面的知识随后总结更新。

收藏 0
实践 聊天 简单
评论 ( 0 )