WebSocket通信随笔

WebSocket，在客户端和服务端之间建立了一个长久连接，两边可以任意发送数据。

 

先来做一个简单的实时通信吧

新建个文件，暂且就叫：easy-product

后台服务的话，就用node的框架express先来搭建一个

开始动手吧。

 

先进入文件夹，初始化文件：npm init,并下载安装包

一、安装express

npm install express --save

npm i socket.io -S

　　

二、新建server.js文件

const express = require('express');
const app = express();
// 设置静态文件夹
app.use(express.static(__dirname));
// 通过node的http模块来创建一个server服务
const server = require('http').createServer(app);
// WebSocket是依赖HTTP协议进行握手的
const io = require('socket.io')(server);

// 监听客户端与服务端的连接
io.on('connection', function(socket) {
    // send方法来给客户端发消息
    socket.send('服务端消息1，你好帅');
    // 监听客户端的消息是否接收成功
    socket.on('message', function(msg) {
        console.log(msg);  // 客户端发来的消息
        socket.send('服务端消息2，搞基否' );
    });
});
// 监听3000端口
server.listen(3000);

　　

三、新建index.html

 

 

代码如下：

// 引用socket.io的js文件
<script src="/socket.io/socket.io.js"></script>

　　

const socket = io('/');
    // 监听与服务器连接成功的事件
    socket.on('connect', () => {
      console.log('连接成功');
      socket.send('客户端消息3，小妹妹你好呀');
    });
    // 监听服务端发来的消息
    socket.on('message', msg => {
      console.log(`客户端接收到的消息： ${msg}`);  
    });
    // 监听与服务器连接断开事件
    socket.on('disconnect', () => {
      console.log('连接断开成功');
    });

　　

目录结构：

 

 

四、启动服务

　　启动node服务后，浏览器访问localhost:3000，然后就可以看到消息了