관련 권장사항: "node js tutorial"
최근에 websocket 인스턴트 메시징에 대해 배웠는데 이것이 매우 강력하다고 느꼈습니다. 여기서는 node를 사용하여 websocket 링크에 대한 서비스를 시작한 다음 vue 링크를 받아 통신하세요. 더 이상 고민할 필요 없이 바로 코드로 넘어가겠습니다.
우선 node의 nodejs-websocket 모듈을 사용해야 합니다.
yarn을 사용하여 설치하세요
yarn add nodejs-websocket --save
물론 npm을 사용해도 됩니다. to install
npm i nodejs-websocket --save
설치가 완료되면 서버 코드 작성을 시작합니다. 먼저 node를 사용하여 로컬에 노드 서버를 설정하여 websocket 서비스를 시작합니다
sock.js:
let ws = require("nodejs-websocket"); console.log("开始建立链接"); ws.createServer(function (conn) { conn.on("text", function (str) { console.log("收到的信息为", str); conn.send(`${str}(机器人`) }); conn.on("close", function (code, reason) { console.log("关闭连接") }); conn.on("error", function (code, reason) { console.log("异常关闭") }) }).listen(8001); console.log("链接建立完毕");
서버는 주로 nodejs를 사용합니다. -websocket을 사용하여 서비스를 시작하고 프런트 엔드에 필요한 값을 반환합니다. 여기서는 허용된 값 뒤에 'robot' 문자열을 추가하는 간단한 프로세스를 수행했습니다.
그런 다음 이 노드 서비스를 시작해야 합니다.
명령 후 경로를 올바르게 찾아야 합니다. sock.js를 루트 디렉터리의 소켓 폴더에 넣었습니다
Execute
yarn socket
마지막으로 클라이언트에서 입력을 받고 싶습니다. 상자와 채팅 프레임:
<template> <p class="test3"> <p class="msg" ref="box"> <p v-for="item in list" :class="[item.type,'msg-item']"> <p> {{item.content}} </p> </p> </p> <p class="input-group"> <input type="text" v-model="contentText"> <button @click="sendText">发送</button> </p> </p> </template> <script> export default { name: "index3", data() { return { list: [],//聊天记录的数组 contentText: "",//input输入的值 } }, methods: { //发送聊天信息 sendText() { let that = this; this.list = [...this.list, {type: "mine", content: this.contentText}];//通过type字段进行区分是自己(mine)发的还是系统(robot)返回的 this.backText(function () { that.contentText = "";//加回调在得到返回数据的时候清除输入框的内容 }); }, backText(callback) { let that = this; if (window.WebSocket) { let ws = new WebSocket("ws://192.168.11.169:8001"); ws.onopen = function (e) { console.log("链接服务器成功"); console.log("that.contentText is", that.contentText); ws.send(that.contentText); callback(); }; ws.onclose = function (e) { console.log("服务器关闭") }; ws.onerror = function () { console.log("服务器出错") }; ws.onmessage = function (e) { that.list = [...that.list, {type: "robot", content: e.data}] } } } }, watch: { //监听list,当有修改的时候进行p的屏幕滚动,确保能看到最新的聊天 list: function () { let that = this; setTimeout(() => { that.$refs.box.scrollTop = that.$refs.box.scrollHeight; }, 0); //加setTimeout的原因:由于vue采用虚拟dom,我每次生成新的消息时获取到的p的scrollHeight的值是生成新消息之前的值,所以造成每次都是最新的那条消息被隐藏掉了 } }, mounted() { } }; </script> <style scoped lang="scss"> .test3 { text-align: center; } .msg { width: 100px; height: 100px; overflow: auto; padding-top: 5px; border: 1px solid red; display: inline-block; margin-bottom: 6px; .msg-item { position: relative; overflow: hidden; p { display: inline-block; border-radius: 40px; background: #3C3D5A; color: white; float: left; padding: 2px 12px; margin: 0 0 2px 0; max-width: 70%; text-align: left; box-sizing: border-box; } &.mine { p { float: right; background: aquamarine; color: white; } } } } </style>
최종 효과 보기:
관련 권장 사항:
더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 교육을 방문하세요! !
위 내용은 node+vue는 간단한 WebSocket 채팅 기능을 어떻게 구현합니까? (코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!