在Vue中利用websocket实现简单的聊天室效果（一）

在使用websocket之前先让我们了解一下websocket吧

WebSocket

如果说ajax像手机发短信一样，发送信息，获取信息，那么websocket技术则是打电话这样。WebSocket要达到的目的是让用户不需要刷新浏览器就可以获得实时更新。

使用ajax轮询会造成服务器的多重压，大量消耗服务器带宽和资源。面对这种情况，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽并实现真正意义上的实时推送。

WebSocket协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。

特点：

服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。这也是它最大的特点。
建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻重，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端也可以与任意服务器通信。
协议标识符是 ws （如果加密，则为wss），服务器网址就是 URL。

WebSocket 事件

Socket.onopen 连接建立时触发
Socket.onmessage 客户端接收服务端数据时触发
Socket.onerror 通信发生错误时触发
Socket.onclose 连接关闭时触发

WebSocket 方法

Socket.send() 使用连接发送数据
Socket.close() 关闭连接

Nodejs + WebSocket 示例

安装WebSocket

npm i nodejs-websocket -S

新建一个index.js作为服务端

var ws = require("nodejs-websocket");
console.log("开始建立连接...")
var server = ws.createServer(function(conn){
 conn.on("text", function (str) {
 console.log("message:"+str)
 conn.sendText("My name is Web Xiu!");
 })
 conn.on("close", function (code, reason) {
 console.log("关闭连接")
 });
 conn.on("error", function (code, reason) {
 console.log("异常关闭")
 });
}).listen(8001)
console.log("WebSocket建立完毕")

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>连接</button>
</body>
</html>

<script>
    let btn = document.querySelector('button');
    btn.onclick = function(){
        if (window.WebSocket) {
            var ws = new WebSocket('ws://localhost:8001');
            ws.onopen = function (e) {
                console.log("连接服务器成功");
                // 向服务器发送消息
                ws.send("what`s your name?");
            }
            ws.onclose = function (e) {
                console.log("服务器关闭");
            }
            ws.onerror = function () {
                console.log("连接出错");
            }
            // 接收服务器的消息
            ws.onmessage = function (e) {
                let message = "message:" + e.data + "";
                console.log(message);
            }
        }
    }
</script>

文章借鉴：

www.toutiao.com/i6683747519…（# Nodejs + WebSocket简单介绍及示例 - 第一章）

vue中利用websocket实现简易聊天室（一）