webSocket在具体项目中的简单使用

2017-08-29

引言

这里对webSocket进行简单的使用，不进行过多的介绍.
这里有用简单node实现的websocket服务端，也进行了简单的介绍，主要是为了方便部分人，搭建自己的小demo尝试效果.

就前端而言，在具体的项目中，后端可能由很多可能的其他的语言开发，含.net、java、C#等，所以一般来说我们只需要关注Client端就行了，能够按照后端的数据格式发送数据，按照返回的数据格式来完成前端的交互.
但对我们上手webSocket来说，前后端一起搭建比较有一个直观的效果.
代码都比较简单直观，但是都是可以用的，困难之处在于如何将这个前端client代码嵌入自己的项目中，满足具体的需求

1.client端代码，主要由前端负责

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket客户端</title>
    <script type="text/javascript">
        function WebSocketTest()
        {
            if ("WebSocket" in window)
            {
                console.log("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                var ws = new WebSocket("ws:/10.101.68.56:9000");

                ws.onopen = function()
                {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send("发送数据");
                    console.log("数据发送中...");
                };

                ws.onmessage = function (evt)
                {
                    var received_msg = evt.data;
                    console.log("数据已接收...");
                    console.log(received_msg);
                };

                ws.onclose = function()
                {
                    // 关闭 websocket
                    console.log("连接已关闭...");
                };
            }

            else
            {
                // 浏览器不支持 WebSocket
                console.log("您的浏览器不支持 WebSocket!");
            }
        }
    </script>
</head>
<body>
<div id="sse">
    <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>
</body>
</html>

2. server端代码(主要由后台提供，核心是前端和后端的沟通交流)

/*
 * 1.安装ws@1.1.1
 * 2.引入ws模块
 * 3.实例化并监听9000
 * 4.处理连接
 */
var WebSocket = require('ws');
var server = new WebSocket.Server({port: 9000});

//todo...

server.on('connection', function (client) {
	// body...
	console.log('incoming...');

	client.on('message', function (data) {
		console.log('message: %s', data);
	});

	client.on('close', function () {
		console.log('client disconnected');
	});

	client.send('success');
})