react+node+websocket实现简单的双向沟通

一、node创建服务器

• 新建一个文件夹nodeServer

mkdir nodeServer
cd nodeServer
npm init

• 然后一路回车
• 安装 express 框架

npm install express --save

• 启动项目

进入项目的根目录，建立一个 index.js 文件，并加入如下代码

const ws = require('nodejs-websocket')
const PORT = 3002const server = ws.createServer( connect => {bordercast('进入')bordercast({type: 0,msg: '进入',// date: new Date().toLocaleDateString()})connect.on('text', (data) => {bordercast({type: 1,msg: '说：'+ data,// date: new Date().toLocaleDateString()})})connect.on('close', ()=>{bordercast({type: 2,msg: '退出',// date: new Date().toLocaleDateString()})})connect.on('error', ()=> {console.log('错误处理')})
} )
function bordercast(msg){var msg = JSON.stringify(msg)server.connections.forEach(item => {item.send(msg)})
}
server.listen(PORT, () => {console.log('监听了'+PORT)
} )

然后在控制台中输入

node index.js

接着使用浏览器访问 http://localhost:3000/，就可以看到效果了。node inde.js执行之后，需要手动去浏览器输入地址

二、用react发送接受值的代码

const ws = require('nodejs-websocket')
const PORT = 3002const server = ws.createServer( connect => {console.log('new connect...')bordercast({type: 0,msg: '进入',// date: new Date().toLocaleDateString()})//处理客户端发送过来的消息connect.on('text', (data) => {console.log("接收到的客户端消息:"+data);connect.sendText("服务器端返回数据:"+data)bordercast({type: 1,msg: '说：'+ data,// date: new Date().toLocaleDateString()})})//监听关闭connect.on('close', ()=>{console.log("connect closed")bordercast({type: 2,msg: '退出',// date: new Date().toLocaleDateString()})})//监听异常connect.on('error', (error)=> {console.log('服务异常关闭',error)})
} )
function bordercast(msg){var msg = JSON.stringify(msg)server.connections.forEach(item => {item.send(msg)})
}
server.listen(PORT, () => {console.log('监听了'+PORT)
} )

三、用vue发送接受值的代码

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！